CODEWITHSUNDEEP
javascriptjqueryhtml
Ramesh vemula
Ramesh vemula

Reputation: 179

how to hide/show using jquery

i have menu having different categories each categories having different sections.If when i click on section one category the related section should be show and reaming sections should be hide. I don't want more code need to reduce lines of code please any one help me

my html code

 <ul>
  <li><a class="cat_1" href="#home" onclick="category(1)">Section One</a></li>
  <li><a class="cat_2" href="#news" onclick="category(2)">Section Two</a></li>
  <li><a class="cat_3" href="#contact" onclick="category(3)">Section three</a></li>
  <li><a class="cat_4" href="#about" onclick="category(4)">Section four</a></li>
</ul>

<div class="subcat_1" style="display: none;">
  <h1>Section One</h1>
  <p>Section One</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
</div>

<div class="subcat_3" style="display: none;">
  <h1>Section three</h1>
  <p>Section three</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>

Jquery code

function category(val){
    $(".subcat_"+ val).show();

}

Upvotes: 0

Views: 62

Answers (4)

Mamun
Mamun

Reputation: 68933

You can hide all using Attribute Starts With Selector before showing the specific section: 

function category(val){
  $("[class^=subcat_").hide();
  $(".subcat_"+ val).show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a class="cat_1" href="#home" onclick="category(1)">Section One</a></li>
  <li><a class="cat_2" href="#news" onclick="category(2)">Section Two</a></li>
  <li><a class="cat_3" href="#contact" onclick="category(3)">Section three</a></li>
  <li><a class="cat_4" href="#about" onclick="category(4)">Section four</a></li>
</ul>

<div class="subcat_1" style="display: none;">
  <h1>Section One</h1>
  <p>Section One</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
</div>

<div class="subcat_3" style="display: none;">
  <h1>Section three</h1>
  <p>Section three</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>

Upvotes: 1

Hien Nguyen
Hien Nguyen

Reputation: 18975

You can use this for show/hide section

function category(val){
    $(".subcat_"+ val).show();
    $("div[class^='subcat_']").each(function(index, item){
       //console.log(1)
       if(!$(this).hasClass("subcat_"+ val)){
          $(this).hide();
       }
    })
}


function category(val){
    $(".subcat_"+ val).show();
    $("div[class^='subcat_']").each(function(index, item){
       //console.log(1)
       if(!$(this).hasClass("subcat_"+ val)){
          $(this).hide();
       }
    })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a class="cat_1" href="#home" onclick="category(1)">Section One</a></li>
  <li><a class="cat_2" href="#news" onclick="category(2)">Section Two</a></li>
  <li><a class="cat_3" href="#contact" onclick="category(3)">Section three</a></li>
  <li><a class="cat_4" href="#about" onclick="category(4)">Section four</a></li>
</ul>

<div class="subcat_1" style="display: none;">
  <h1>Section One</h1>
  <p>Section One</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
</div>

<div class="subcat_3" style="display: none;">
  <h1>Section three</h1>
  <p>Section three</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>

Upvotes: 0

JensW
JensW

Reputation: 442

Try setting the css property with Jquery.

So: 

$(".subcat_"+ val).css("display", "block");

Something like this? You will have to set it back to .css("display", "none") in the other functions though.

Upvotes: 0

Ginzorf
Ginzorf

Reputation: 789

Have you tried 

$(".subcat_"+ val).toggle();

?

Upvotes: 0

Related Questions