Show/hide div with different content

Question

When the user clicks on one of the images in the carousel a position: absolute; div should appear. The div contains two different images and a form based on the picture initially clicked and has a submit button. How can I make a show/hide that displays different content for each image?

Here's the code of one of the carousels (there are 4 on the website and the script should work with all four of them).

<div id="slider1">
    <a class="buttons prev" href="#">&#60;</a>
    <div class="viewport">
        <ul class="overview">
            <li><img src="images/etichete/etichete vinuri pe desene 20-30-01.jpg" /></li>
            <li><img src="images/etichete/etichete vinuri pe desene 20-30-02.jpg" /></li>
            <li><img src="images/etichete/etichete vinuri pe desene 20-30-03.jpg" /></li>
            <li><img src="images/etichete/etichete vinuri pe desene 20-30-04.jpg" /></li>
            <li><img src="images/etichete/etichete vinuri pe desene 20-30-05.jpg" /></li>
            <li><img src="images/etichete/etichete vinuri pe desene 20-30-06.jpg" /></li>
        </ul>
    </div>
    <a class="buttons next" href="#">&#62;</a>
</div>

The only solution that I have in my mind is to create 30 (that's the number of images) show/hide divs... so much for DRY I guess.

Answer 1

You can also add data-something attribute to the carousel images and load the content from a partial view via AJAX.

But this way you'll need to add conditions in that partial and show/hide content depending on that data-something (probably an Id).