zemaker zemaker - 5 months ago 50
jQuery Question

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>




Answer

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>

Comments