Use jQuery or JS to hide div on different dropdown selection

307
November 26, 2016, at 11:29 AM

When I select an option from the dropdown, a set of buttons associated with that selection appears in a div (where it should). I then click one of those buttons which causes a second div to appear (#info, green background) and content associated with the button to appear inside of the div (as intended).

My issue is this:

Once the second div has appeared, if I go back to the initial dropdown and select a different option, I want the green #info div to disappear, where it currently stays visible and contains the content associated with the last button clicked despite having selected a different dropdown option.

I would SO appreciate any help anyone can provide! Thanks so much for taking a look. So grateful to have access to all of your smart brainz.

Here is my Fiddle

$(document).ready(function() { 
  $("select").change(function() { 
    $(this).find("option:selected").each(function() { 
      if ($(this).attr("value") == "red") { 
        $(".box").not(".red").hide(); 
        $(".red").show(); 
 
      } else if ($(this).attr("value") == "green") { 
        $(".box").not(".green").hide(); 
        $(".green").show(); 
      } else if ($(this).attr("value") == "blue") { 
        $(".box").not(".blue").hide(); 
        $(".blue").show(); 
      } else { 
        $(".box").hide(); 
      } 
    }); 
  }).change(); 
 
  $('.buttons button').click(function() { 
    $('#info').empty(); 
    $('#info').html($("#" + $(this).data('link')).html()); 
  }); 
});
.box { 
  padding: 20px; 
  margin-top: 20px; 
  border: 1px solid #000; 
  width: 200px; 
  height: 250px; 
  padding: 0px; 
  display: inline-block; 
  float: left; 
} 
#button-column { 
  text-align: center; 
  padding: 0px; 
} 
button { 
  font-size: 12px; 
  width: 100px; 
  height: 30px; 
  padding: 10px; 
  margin: 15px; 
} 
#info { 
  width: 250px; 
  height: 200px; 
  float: left; 
  display: inline-block; 
  text-align: center; 
  margin-left: 15px; 
  margin-top: 30px; 
} 
#dropdown { 
  width: 200px; 
  text-align: center; 
} 
.box h3 { 
  text-align: center; 
} 
.info { 
  background-color: green; 
  height: 200px; 
  border: 1px solid #000; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="dropdown"> 
  <h3>I am a...</h3> 
  <select> 
    <option>Select</option> 
    <option value="green">Dinosaur</option> 
    <option value="red">Unicorn</option> 
  </select> 
</div> 
 
<div class="green box"> 
  <h3>Today I am feeling...</h3> 
  <ul id="button-column" style="list-style: none;"> 
    <li class="buttons"> 
      <button data-link="content">Content</button> 
    </li> 
    <li class="buttons"> 
      <button data-link="mad">Mad</button> 
    </li> 
    <li class="buttons"> 
      <button data-link="hungry">Hungry</button> 
    </li> 
 
  </ul> 
 
</div> 
 
<div class="red box"> 
  <h3>Today I am feeling...</h3> 
  <ul id="button-column" style="list-style: none;"> 
    <li class="buttons"> 
      <button data-link="shy">Shy</button> 
    </li> 
    <li class="buttons"> 
      <button data-link="curious">Curious</button> 
    </li> 
    <li class="buttons"> 
      <button data-link="sleepy">Sleepy</button> 
    </li> 
  </ul> 
</div> 
<div id="info"> 
 
</div> 
<div id="hiddenDivs" style="display:none;"> 
  <!-- Dinosaur Select --> 
  <div id="content"> 
    <div class="info"> 
      <h3>Laying in the sun is nice.</h3>  
    </div> 
  </div> 
  <div id="mad"> 
    <div class="info"> 
      <h3>Go knock some trees over!</h3>  
    </div> 
  </div> 
  <div id="hungry"> 
    <div class="info"> 
      <h3>Go make a salad!</h3>  
    </div> 
  </div> 
  <!-- Unicorn Select --> 
  <div id="shy"> 
    <div class="info"> 
      <h3>I like to hide in the forest.</h3>  
    </div> 
  </div> 
  <div id="curious"> 
    <div class="info"> 
      <h3>Wait until everyone is asleep.</h3>  
    </div> 
  </div> 
  <div id="sleepy"> 
    <div class="info"> 
      <h3>Napping under a shady tree is the best.</h3>  
    </div> 
  </div>

Answer 1

Here's an updated Fiddle.

You just need to hide and show the #info div on change or load.

So anytime the dropdown changes, that #info div will hide. And then, if someone clicks a button, it will show. That show() function will always run, but will be ignored if you're clicking on the button multiple times.

    });
    $("#info").hide(); // Hide
}).change();
$('.buttons button').click(function (){
    $("#info").show(); // Show
    $('#info').empty();
    $('#info').html($("#" + $(this).data('link')).html());
}); 
Rent Charter Buses Company
READ ALSO
Increase Speed of UIWebView &amp; JS Injection

Increase Speed of UIWebView & JS Injection

I have an iOS app where my app loads a website and injects code of specific values using jQuery and JavaScriptI was wondering if there was a way to make the UIWebView load the website super fast and inject the code fast as well

334
Use jQuery Sibling to find top &lt;th&gt; in HTML table

Use jQuery Sibling to find top <th> in HTML table

I have an HTML table that has many hidden columnsYou can think of the columns as sets of 3

259
How to get response from API that only returns a number?

How to get response from API that only returns a number?

So I'm trying to use an API that returns only a number and nothing else, but I can't figure out how to get the response from it with JavaScript/jQueryExample of a response from it: 2535412825788939 and that's it (no squiggly brackets or square brackets...

286
How do I change the color on my noUiSliders depending on the value it currently is at?

How do I change the color on my noUiSliders depending on the value it currently is at?

So I created some custom color classes for my sliders and it works well

267