CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sajal
Sajal

Reputation: 4401

Want to show/hide multiple divs based on dropdown box selection

I've tried looking around and there are similar problems, but mine is way more simple, but yet, I can't find a solution within these forums. This is the dropdown markup.

<select id ="category_faq">
     <option value="1">item1</option>
     <option value="2">item2</option>
     <option value="3">item3</option>
</select>

The divs are as:

<div class="views-row-1"></div>
<div class="views-row-2"></div>
<div class="views-row-3"></div>

Now, while choosing item 1, only div views-row-1 should be displayed and hiding all other divs. when choosing item 2, only div views-row-2 should be displayed and hiding others. and so on....

the jquery i have used is as:

jQuery(document).ready(function($) {
      $('#category_faq').on('change',function() {
         if(this.value=='1')
            {
                $('.views-row-1').show();
            }
        else if (this.value=='2') 
             {
                $(".views-row-1").hide();
                $(".views-row-2").show();
                $(".views-row-3").hide();
            }
        else
             {
                $(".views-row-1").hide();
                $(".views-row-2").hide();
                $(".views-row-3").show();
             }

    }); 

});

This doesn't seem to work. Where could i be wrong?

Upvotes: 0

Views: 4179

Answers (4)

AmanVirdi
AmanVirdi

Reputation: 1685

Try this:

  $('#category_faq').on('change',function() {
      $('div[class!=views-row-]').hide();
      $('div.views-row-' + this.value).show();
  });

Working Fiddle

Upvotes: 0

user3779812
user3779812

Reputation: 230

http://jsfiddle.net/2gzm2q15/

$('div').hide();
$('.views-row-' + $('#category_faq').val()).show();
$('#category_faq').on('change', function () {
    $('div').hide();         
    $('.views-row-' + $(this).val()).show();
});

First you need to initialize it so the correct div is shown for the select menu's default value. When you change the menu just hide them all and only show the one you want.

Upvotes: 0

Gary Jones
Gary Jones

Reputation: 451

I would give all of the divs you want to show/hide a common selector such as:

<div class="views-row views-row-1"></div> 
<div class="views-row views-row-2"></div>
<div class="views-row views-row-3"></div>

And then make each of the views-row be hidden unless it matches your clicked va:

$('#category_faq').on('change',function() {
   var val = $(this).val();
   $(".views-row").not('.views-row-'+val).hide() // Hide them all
   $(".views-row-"+val).show(); // Show if not already showing
});

Upvotes: 0

j08691
j08691

Reputation: 207861

You could reduce it to this:

$('#category_faq').on('change', function () {
    $('div').hide();
    $('div.views-row-' + $(this).val()).show()
});

jsFiddle example

Upvotes: 2

Related Questions