CODEWITHSUNDEEP
javascriptjqueryhtml
Mounir Federere
Mounir Federere

Reputation: 135

Hide and show specific divs on select

Okay i have dynamic categories that i select from data base ,i put them in a select drop down, and each categorie has multi articles, first of all i display all articles the problem is,i want to on select a categorie,i only display articles related to that categorie and hide the rest, for that i put the articles in divs ,and each div it has it own related categorie class. im stuck how to hide and display them tho here is my code for example:

 <select  id="selectleft" >
     <option value="categorie">categorie</option></center>
         <option value="categorie1">sport</option>
         <option value="categorie2">movies</option>
         <option value="categorie3">news</option>


        </select>

and the articles are displayed like this 

<div class="categorie1>article 1 </div>
<div class="categorie1>article 2 </div>
<div class="categorie2>article 1 </div>
<div class="categorie2>article 2 </div
<div class="categorie3>article 3 </div>
<div class="categorie3>article 3 </div

okay i want for example if i select categorie1 ,all divs with class categorie 1 get showe and rest get hidden

Upvotes: 2

Views: 86

Answers (4)

Ajay Malhotra
Ajay Malhotra

Reputation: 838

According to what you have told, I made the code. please check the following snippet.

$('#selectleft').change(function()
{
  $('.article').addClass('deactive');
   var x = $('#selectleft').val();
   $('.'+x).removeClass('deactive');
});
.deactive{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1> select cotegories</h1>
<select  id="selectleft" >
     <option value="categorie">categorie</option>
         <option value="categorie1">sport</option>
         <option value="categorie2">movies</option>
         <option value="categorie3">news</option>


        </select>

<div class="article deactive categorie1">article 1 </div>
<div class="article deactive categorie1">article 2 </div>
<div class="article deactive categorie2">article 3 </div>
<div class="article deactive categorie2">article 4 </div>
<div class="article deactive categorie3">article 5 </div>
<div class="article deactive categorie3">article 6 </div>

Upvotes: 0

itzmukeshy7
itzmukeshy7

Reputation: 2677

This may help ;)

$('#selectleft').change(function() {
  /* hide visible articles */
  $('.category:visible').hide();
  
  /* show selected option articles */
  $('.' + this.value).show();
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <select id="selectleft">
      <option value="categorie">categorie</option>
      <option value="categorie1">sport</option>
      <option value="categorie2">movies</option>
      <option value="categorie3">news</option>
    </select>

    <div class="category categorie">article(categorie option 1 default selected)</div>
    <div class="category categorie1">article 1(sport option 2)</div>
    <div class="category categorie1">article 2(sport option 2)</div>
    <div class="category categorie2">article 1(movies option 3)</div>
    <div class="category categorie2">article 2(movies option 3)</div>
    <div class="category categorie3">article 3(news option 4)</div>
    <div class="category categorie3">article 3(news option 4)</div>

Upvotes: 2

Pranav C Balan
Pranav C Balan

Reputation: 115212

You can use change() event handler

$('#selectleft').change(function() {
  // hide all div
  $('.categorie').hide();
  // or hide only the rest by
  // $('.categorie').not('.' + this.value).hide();

  // show div based on selected option
  $('.' + this.value).show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="selectleft">
  <option value="categorie">categorie</option>
  <option value="categorie1">sport</option>
  <option value="categorie2">movies</option>
  <option value="categorie3">news</option>
</select>

<div class="categorie categorie1">article 1</div>
<div class="categorie categorie1">article 2</div>
<div class="categorie categorie2">article 1</div>
<div class="categorie categorie2">article 2</div>
<div class="categorie categorie3">article 3</div>
<div class="categorie categorie3">article 3</div>

Upvotes: 1

REDEVI_
REDEVI_

Reputation: 684

<script>
$('#selectleft').change(function()
{
   var x = $('#select').val();
   $('.x').hide();
});
</script>

Upvotes: -1

Related Questions