I have a handful of images working as jQuery toggle switches - Showing or hiding an element on a click event.
The code below mostly works as intended, but I'm fairly certain I'm using a lot of unnecessary stuff to make it happen. Any suggestions on streamlining?
Also, any suggestions on closing (toggle to hide) any visible elements that had already been toggled to visible? As it works now, if the user clicks on the first image and then the second image, it stacks the newly visible elements on top of each other. Ideally, I'd like to close (hide) the element from the first toggle when the second toggle is clicked and/or close any open elements on a scroll event.
The code below is abridged. There's actually 10+ toggles which can get a little unwieldy if the user has opened a bunch of them.
$("#show-wine").click(function(){
$(".wine-text").toggle();
});
$("#show-wine2").click(function(){
$(".wine-text2").toggle();
});
$("#show-wine3").click(function(){
$(".wine-text3").toggle();
});
.wine-text, .wine-text2, .wine-text3, .wine-text4, .wine-text5, .wine-text6, .wine-text7, .wine-text8, .wine-text9 {
display:none;
position:fixed;
top:3em;
left:1.5em;
width:35em;
padding:1em;
height:auto;
min-height:30em;
background: rgba(0,0,0,0.95);
color:#FFF;
border-radius:4px;
line-height:1.25em;
text-align:left;
}
.wine-tiles li img:hover {
cursor:pointer;
opacity:.7;
}
.wine-tiles li img .unhide:hover .wine-text {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="column1">
<ul class="wine-tiles">
<li>
<img src="images/labels/image.jpg" id="show-wine" class="unhide bounce" alt="Img 1"/>
<span class="wine-text">
<span class="wine-text-title centered">Wine#1</span><br>
<span class="wine-text-winery centered">Big White House</span><br><br>
<span class="wine-text-copy">Lorem Ipsum</span>
<br/><br/>
<button id="hide-wine" class="button">Close</button>
</span>
<h2>Title</h2>
</li>
<li>
<img src="images/labels/image.jpg" id="show-wine2" class="unhide bounce" alt="Img 2"/>
<span class="wine-text2">
<span class="wine-text-title centered">Wine#2</span><br>
<span class="wine-text-winery centered">Big White House</span><br><br>
<span class="wine-text-copy">Lorem Ipsum</span>
<br/><br/>
<button id="hide-wine" class="button">Close</button>
</span>
<h2>Title</h2>
</li>
<li>
<img src="images/labels/image.jpg" id="show-wine3" class="unhide bounce" alt="Img 3"/>
<span class="wine-text3">
<span class="wine-text-title centered">Wine#3</span><br>
<span class="wine-text-winery centered">Big White House</span><br><br>
<span class="wine-text-copy">Lorem Ipsum</span>
<br/><br/>
<button id="hide-wine" class="button">Close</button>
</span>
<h2>Title</h2>
</li>
</ul>
</div>
<div id="column2">
<ul class="wine-tiles">
<li>
<img src="images/labels/image.jpg" id="show-wine" class="unhide bounce" alt="Img 1"/>
<span class="wine-text">
<span class="wine-text-title centered">Wine#4</span><br>
<span class="wine-text-winery centered">Big White House</span><br><br>
<span class="wine-text-copy">Lorem Ipsum</span>
<br/><br/>
<button id="hide-wine" class="button">Close</button>
</span>
<h2>Title</h2>
</li>
<li>
<img src="images/labels/image.jpg" id="show-wine2" class="unhide bounce" alt="Img 2"/>
<span class="wine-text2">
<span class="wine-text-title centered">Wine#5</span><br>
<span class="wine-text-winery centered">Big White House</span><br><br>
<span class="wine-text-copy">Lorem Ipsum</span>
<br/><br/>
<button id="hide-wine" class="button">Close</button>
</span>
<h2>Title</h2>
</li>
<li>
<img src="images/labels/image.jpg" id="show-wine3" class="unhide bounce" alt="Img 3"/>
<span class="wine-text3">
<span class="wine-text-title centered">Wine#6</span><br>
<span class="wine-text-winery centered">Big White House</span><br><br>
<span class="wine-text-copy">Lorem Ipsum</span>
<br/><br/>
<button id="hide-wine" class="button">Close</button>
</span>
<h2>Title</h2>
</li>
</ul>
</div>