lcunning lcunning - 17 days ago 7
Javascript Question

Use jQuery or JS to hide div on different dropdown selection

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

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());
});