How to write this code for hide/show - add/remove class - more optimal in jQuery?

Question

I have code that removes or add class to div on click on right button. This code works fine but I know that there is the more elegant way to do this with less code.

My code:

jQuery(document).ready(function($) {    
  // #pri01 is visible, has class visible by default
  $("#pri01").addClass('visible');
  $("#pri01").removeClass('hide');

  // LINKTEXT2
  // on click on #linktext2 - #pri01, #pri03, #pri04, #pri05, #pri06 gets class hide and lose class visible
  $("#linktext2").click(function(){
    $('#pri01').removeClass('visible');
    $('#pri01').addClass('hide');   
    $('#pri03').removeClass('visible');
    $('#pri03').addClass('hide');
    $('#pri04').removeClass('visible');
    $('#pri04').addClass('hide');   
    $('#pri05').removeClass('visible');
    $('#pri05').addClass('hide');   
    $('#pri06').removeClass('visible');
    $('#pri06').addClass('hide');   
    // on click on #linktext2 #pri02 gets class visible and lose class hide
    $('#pri02').removeClass('hide');
    $('#pri02').addClass('visible');         
  });    

  //#LINKTEXT1      
  // on click on #linktext1 - #pri02, #PRI03, #PRI04, #PRI05, #PRI06 gets class hide and lose class visible
  $("#linktext1").click(function(){
    $('#pri02').removeClass('visible');
    $('#pri02').addClass('hide');   
    $('#pri03').removeClass('visible');
    $('#pri03').addClass('hide');
    $('#pri04').removeClass('visible');
    $('#pri04').addClass('hide');
    $('#pri05').removeClass('visible');
    $('#pri05').addClass('hide');   
    $('#pri06').removeClass('visible');
    $('#pri06').addClass('hide');   
    // on click on #linktext1 #pri01 gets class visible and lose class hide
    $('#pri01').removeClass('hide');
    $('#pri01').addClass('visible');         
  });    

  //#LINKTEXT3      
  // on click on #linktext3 - #pri02, #PRI01, #PRI04, #PRI05, #PRI06 gets class hide and lose class visible
  $("#linktext3").click(function(){
    $('#pri01').removeClass('visible');
    $('#pri01').addClass('hide');   
    $('#pri02').removeClass('visible');
    $('#pri02').addClass('hide');
    $('#pri04').removeClass('visible');
    $('#pri04').addClass('hide');
    $('#pri05').removeClass('visible');
    $('#pri05').addClass('hide');   
    $('#pri06').removeClass('visible');
    $('#pri06').addClass('hide');   
    // on click on #linktext3 #pri03 gets class visible and lose class hide
    $('#pri03').removeClass('hide');
    $('#pri03').addClass('visible');         
  });    

  //#LINKTEXT4      
  // on click on #linktext4 - #pri02, #PRI01, #PRI03, #PRI05, #PRI06 gets class hide and lose class visible
  $("#linktext4").click(function(){
    $('#pri01').removeClass('visible');
    $('#pri01').addClass('hide');   
    $('#pri02').removeClass('visible');
    $('#pri02').addClass('hide');
    $('#pri03').removeClass('visible');
    $('#pri03').addClass('hide');
    $('#pri05').removeClass('visible');
    $('#pri05').addClass('hide');   
    $('#pri06').removeClass('visible');
    $('#pri06').addClass('hide');   
    // on click on #linktext4 #pri04 gets class visible and lose class hide
    $('#pri04').removeClass('hide');
    $('#pri04').addClass('visible');         
  });    

  //#LINKTEXT5      
  // on click on #linktext5 - #pri02, #PRI01, #PRI03, #PRI04, #PRI06 gets class hide and lose class visible
  $("#linktext5").click(function(){
    $('#pri01').removeClass('visible');
    $('#pri01').addClass('hide');   
    $('#pri02').removeClass('visible');
    $('#pri02').addClass('hide');
    $('#pri03').removeClass('visible');
    $('#pri03').addClass('hide');
    $('#pri04').removeClass('visible');
    $('#pri04').addClass('hide');   
    $('#pri06').removeClass('visible');
    $('#pri06').addClass('hide');   
    // on click on #linktext5 #pri05 gets class visible and lose class hide
    $('#pri05').removeClass('hide');
    $('#pri05').addClass('visible');         
  });    

  //#LINKTEXT6      
  // on click on #linktext6 - #pri02, #PRI01, #PRI03, #PRI04, #PRI05 gets class hide and lose class visible
  $("#linktext6").click(function(){
    $('#pri01').removeClass('visible');
    $('#pri01').addClass('hide');   
    $('#pri02').removeClass('visible');
    $('#pri02').addClass('hide');
    $('#pri03').removeClass('visible');
    $('#pri03').addClass('hide');
    $('#pri04').removeClass('visible');
    $('#pri04').addClass('hide');   
    $('#pri05').removeClass('visible');
    $('#pri05').addClass('hide');   
    // on click on #linktext6 #pri06 gets class visible and lose class hide
    $('#pri06').removeClass('hide');
    $('#pri06').addClass('visible');         
  }); 
  //konec
});

So i have 6 buttons:

#linktext1, #linktext2, #linktext3, #linktext4, #linktext5, #linktext6 

and div sections

#pri01, pri02, #pri03, #pri04, #pri05, #pri06

So when I click on #linktext1 only #pri1 should be visible (have class visible) and all others are hidden (have class hide).

So how to make this code in a few lines and make this code more optimal?

Answer 1

you can check the child in the class hierarchy, also by the numbers with that you are identifying the class names.

Answer 2

Without making assumptions about your current HTML structure and just based on your code, you can do it with a single event handler:

$("#linktext1, #linktext2, #linktext3, #linktext4, #linktext5, #linktext6").click(function() {
    var pre = "#pre" + this.id.match(/\d+$/);
    $("#pre1, #pre2, #pre3, #pre4, #pre5, #pre6")
        .not(pre)
        .removeClass("visible")
        .addClass("hide");
    $(pre).removeClass("hide").addClass("visible");
});

That gets the ID of the matching #pre for the #linktext that was clicked, then finds all of the #pres, excludes the matching #pre, removes the visible class from the other five and adds the hide class to them. Then it gets the matching #pre and removes hide and adds visible.

Some other notes:

• Instead of having both visible and hide classes, I recommend having just one or the other, and having the "other" state just be the absense of the class.
• I'd look into using classes rather than all those IDs.
• If all the #linktext are in a container, and all the #pre are in a container, you can use their position within the container.

Something like:

$(".link").on("click", function(e) {
  e.preventDefault();
  var index = $(this).index();
  $(".pre")
    .removeClass("visible")
    .eq(index)
    .addClass("visible");
});

a.link {
  margin-left: 2px;
  margin-right: 2px;
}
/* Default state for a .pre is not to show */
.pre {
  display: none;
}
.pre.visible {
  display: block;
}

<p>
  <a href="#pre1" class="link">link 1</a>
  <a href="#pre2" class="link">link 2</a>
  <a href="#pre3" class="link">link 3</a>
  <a href="#pre4" class="link">link 4</a>
  <a href="#pre5" class="link">link 5</a>
  <a href="#pre6" class="link">link 6</a>
</p>
<div>
  <div class="pre visible">pre 1</div>
  <div class="pre">pre 2</div>
  <div class="pre">pre 3</div>
  <div class="pre">pre 4</div>
  <div class="pre">pre 5</div>
  <div class="pre">pre 6</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>