Show/hide section of site based on dropdown selection

Question

Trying to figure out how to show/hide sections on my site's page, referencing this code here: How can I show and hide elements based on selected option with jQuery?

I'm not sure where to put my data section ID so that instead of the output being colors, it's an entire section of the page.

    $(function() {
        $('#colorselector').change(function(){
            $('.colors').hide();
            $('#' + $(this).val()).show();
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
   <option value="red">Red</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

Have you tried placing the contents inside the divs? – BehRouz Sep 28 '22 at 23:11 — BehRouz, Sep 28 '22 at 23:11

score 0 · Answer 1 · answered Sep 29 '22 at 01:03

Consider the following.

$(function() {
  $('#colorselector').change(function() {
    $('.section').hide();
    if ($("option:selected", this).index() > 0) {
      $('#section-' + $(this).val()).show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
  <option>Select Section...</option>
  <option value="1">Section 1</option>
  <option value="2">Section 2</option>
  <option value="3">Section 3</option>
</Select>
<div id="section-1" class="section" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas volutpat nec magna ut tincidunt. Pellentesque sed bibendum odio. Vivamus sodales aliquam lectus eu consectetur. Donec eu felis vitae dolor ultrices lobortis. Nulla eget suscipit sapien, et lacinia dolor. Integer auctor magna vitae iaculis auctor. Proin nibh dui, tincidunt vel arcu vitae, varius tempus mauris. Nam sed magna velit. Morbi vitae elit vitae neque feugiat pretium id id augue. Praesent quis arcu varius, vulputate metus venenatis, eleifend dolor. Proin feugiat semper nibh ut ornare. Nunc imperdiet, leo finibus consequat accumsan, quam augue venenatis odio, sit amet interdum purus enim sit amet nibh. Maecenas volutpat est vitae nulla iaculis, vitae sagittis mauris condimentum.</div>
<div id="section-2" class="section" style="display:none">Nunc non sem vitae ante eleifend mattis eget non orci. Nunc ac libero in erat feugiat placerat quis sit amet lacus. Nulla ut dolor scelerisque, euismod justo id, dapibus elit. Fusce fringilla tincidunt velit. Maecenas scelerisque vehicula maximus. Fusce eget elementum nibh. Donec eget diam iaculis, rhoncus orci nec, bibendum ipsum. Quisque auctor non mauris at tempus. Nulla sit amet leo venenatis, malesuada libero et, volutpat libero. Nullam malesuada posuere tristique.</div>
<div id="section-3" class="section" style="display:none">Aliquam lacus elit, gravida sagittis nisi tempor, porta pellentesque nulla. Integer justo magna, blandit quis ante euismod, tincidunt tincidunt ipsum. Nam faucibus, felis ac accumsan egestas, neque ipsum ornare tortor, nec placerat nisi felis vel augue. Aliquam vitae maximus purus, et imperdiet magna. Vestibulum sit amet massa eleifend, semper eros rhoncus, pretium sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam rhoncus ut erat id consequat. Maecenas a iaculis lorem. Phasellus nulla nulla, molestie sit amet ex nec, ultrices eleifend augue. Aliquam velit purus, congue non ex id, pretium vehicula augue. Vestibulum accumsan orci ut suscipit malesuada. Duis rutrum sagittis orci, quis tincidunt nibh gravida ac. In nec est purus. Morbi egestas, purus eget varius sodales, nunc purus ultricies dolor, vitae ornare nisl urna eget odio. Pellentesque bibendum, dui a vestibulum sollicitudin, nunc augue faucibus felis, id tincidunt metus est et ex. </div>

This works as expected. You can replace the colors with the Data and Value with the name of the section or ID you will use.

Show/hide section of site based on dropdown selection

1 Answers1