CODEWITHSUNDEEP
javascriptjqueryhtml
zemaker
zemaker

Reputation: 181

Toggle DIV on drop down selection

I have a SELECT dropdown and when you cycle through the OPTIONS the corresponding DIV's get shown/hidden.

The part I'm having an issue with is, that I want the code to apply to the next items on the page and not globally to the entire page.

$(document).ready(function() {
  $('#toggle-divs').on('change', function() {
    $(this).next(".div1").toggle(this.value == 2)
	$(this).next(".div2").toggle(this.value == 3)
	$(this).next(".div3").toggle(this.value == 4)
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="aside">
  <select id="toggle-divs">
    <option selected="selected" value="1">Select item...</option>
    <option value="2">Item 1</option>
    <option value="3">Item 2</option>
    <option value="4">Item 3</option>
  </select>
</div>
<div class="aside">
  <div class="div1" style="display:none;">
    DIV 1
  </div>
  <div class="div2" style="display:none;">
    DIV 2
  </div>
  <div class="div3" style="display:none;">
    DIV 3
  </div>
</div>

Upvotes: 0

Views: 1797

Answers (2)

Pedro Estrada
Pedro Estrada

Reputation: 2404

I think this what you're looking for.

I made some changes to the html and the jquery.

In the html i removed the value from the "Select Item..." option, you dont want that to send a value if they select that. Then I subtracted 1 from the others.

After the on change, i am hiding all the divs and the next line i am just showing the one that is selected in the dropdown.

EDIT

I just noticed that you have 2 divs with class "aside", maybe it would be better to assign the second div an id to make it unique. I added an id of "aside_content" and modified the jquery appropriately.

EDIT 2

Modified the jquery to take into account multiple instances of this snippet on the page. I am using the parent of the dropdown with class aside and then getting the next div with class aside and doing the same logic as before on that div.

$(document).ready(function() {
  $('.toggle-divs').on('change', function() {
    var nextAside = $(this).parent('.aside').next('.aside');
    nextAside.find("div").hide();
    nextAside.find(".div" + this.value).show()
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="aside">
  <select class="toggle-divs">
    <option selected="selected" value="">Select item...</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
  </select>
</div>
<div class="aside">
  <div class="div1" style="display:none;">
    DIV 1
  </div>
  <div class="div2" style="display:none;">
    DIV 2
  </div>
  <div class="div3" style="display:none;">
    DIV 3
  </div>
</div>
<!-- Second Instace -->
<div class="aside">
  <select class="toggle-divs">
    <option selected="selected" value="">Select item...</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
  </select>
</div>
<div class="aside">
  <div class="div1" style="display:none;">
    DIV 1
  </div>
  <div class="div2" style="display:none;">
    DIV 2
  </div>
  <div class="div3" style="display:none;">
    DIV 3
  </div>
</div>

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42044

To preserve the select values and avoid to hide all elements, I suggest:

$(function () {
  $('#toggle-divs').on('change', function() {
    // toogle on only selected one
    $(".aside .div" + (+this.value - 1)).toggle(true);
    
    // toggle off only the unseleted and visible
    $(".aside > div:not('.div" + (+this.value - 1) + "'):visible").toggle(false);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="aside">
    <select id="toggle-divs">
        <option selected="selected" value="1">Select item...</option>
        <option value="2">Item 1</option>
        <option value="3">Item 2</option>
        <option value="4">Item 3</option>
    </select>
</div>
<div class="aside">
    <div class="div1" style="display:none;">
        DIV 1
    </div>
    <div class="div2" style="display:none;">
        DIV 2
    </div>
    <div class="div3" style="display:none;">
        DIV 3
    </div>
</div>

Upvotes: 0

Related Questions