show hide jquery multiple divs

Question

Please forgive me if this has already been answered, but I searched and could not find a case similar enough to my request.

I have 8 images (Eventually I will be drawing on information from a database, but I would like a try at getting that part to work myself).

Each image is a toggle for div that holds details for that image (events).

At the moment All details divs are hidden and when you click on an image, its details div is 'shown'. in the details div is a 'hide' button, that hides the details div and the images slide back into view from below.

I would like to have it so that, if you click on a different image at the bottom of the screen, while a details div is open (shown), it closes that details div and opens the details div of teh image just clicked.

Eventually I would like a 'next' link inside the details div that scrolls to the next details div, but, one step at a time.

The code I have is:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".obtn1").click(function(){
        $(".detail1").show(1500);
    });
});
$(document).ready(function(){
    $(".cbtn1").click(function(){
        $(".detail1").hide(1500);
    });
});
$(document).ready(function(){
    $(".obtn2").click(function(){
        $(".detail2").show(1500);
    });
});

... on up to obtn8 and cbtn8
</script>

with the following html:

<div id="event-detail">
    <div class="detail1" style="display:none;height:1000px;" align="center">
    <img class="cbtn1" src="images/dev_detail/more.gif" width="70" height="30">
    <img src="images/dev_detail/photo-backgrund1.jpg" width="650" height="478">
    <img class="cbtn1" src="images/dev_detail/more.gif" width="70" height="30">
    </div>
    <div class="detail2" style="display:none;height:1000px;" align="center">
    <img class="cbtn2" src="images/dev_detail/more.gif" width="70" height="30">
    <img src="images/dev_detail/photo-backgrund2.jpg" width="650" height="478">
    <img class="cbtn2" src="images/dev_detail/more.gif" width="70" height="30">
    </div>
    <div class="detail3" style="display:none;height:1000px;" align="center">
    <img class="cbtn3" src="images/dev_detail/more.gif" width="70" height="30">
    <img src="images/dev_detail/photo-backgrund3.jpg" width="650" height="478">
    <img class="cbtn3" src="images/dev_detail/more.gif" width="70" height="30">
    </div>

... on up to 8

<table width="800" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img class="obtn1" src="images/dev_detail/BitterSuite_logo1.jpg" width="200" height="147">
        </td>
        <td><img class="obtn2" src="images/dev_detail/BitterSuite_logo2.jpg" width="200" height="147">
        </td>
        <td><img class="obtn3" src="images/dev_detail/BitterSuite_logo3.jpg" width="200" height="147">
        </td>
        <td><img class="obtn4" src="images/dev_detail/BitterSuite_logo4.jpg" width="200" height="147">
        </td>
    </tr>
    <tr>
        <td><img class="obtn5" src="images/dev_detail/BitterSuite_logo5.jpg" width="200" height="147">
        </td>
        <td><img class="obtn6" src="images/dev_detail/BitterSuite_logo6.jpg" width="200" height="147">
        </td>
        <td><img class="obtn7" src="images/dev_detail/BitterSuite_logo7.jpg" width="200" height="147">
        </td>
        <td><img class="obtn8" src="images/dev_detail/BitterSuite_logo8.jpg" width="200" height="147">
        </td>
    </tr>
</table>

I quite like the default slide effects on there at the moment and would like to keep that if possible. Any help with this would be very appreciated. Thanks in advance. Cheers Al

Use a common class for each elements. You are using class as it is attribute id. Classes don't have to be unique. — A. Wolff
I am a bit of a beginner with jquery and I realize that The way I have all the "document ready" is probably redundant, but I wasn't sure how to write it properly. Thanks. — Almeister9
Hi @roasted, thanks for help. I cant see any other way to identify which details div to open and close except to have a different class for each one. — Almeister9
@vinothini I will try, but I have never used jsfiddle before. — Almeister9

Terence Terence · Accepted Answer · 2013-05-27T14:22:09

See updated fiddle Using the below jscript:

$(document).ready(function () {
    //handle the click of the image button to show the div
    $(".obtn").click(function() {
        //isolate the div number
        var divNumber = $(this).prop('id').replace("obtn", "");
        //hide all details div, using the class name
        $(".detailDiv").hide(1500);
        //show the correct details div, based on the selected div number
        $("#detail" + divNumber).show(1500);
    });

    //handle the more button close function to hide all detail divs
    $('.cbtnImg').click(function(){
        $(".detailDiv").hide(1500);
    });
});

I changed all images to have the class obtn and the the detail divs to have the class detailDiv and the more button to have class ctnImg.

I kept the unique names as the element id's and using the above jscript, I could then close all details divs and only open the specific one required.

show hide jquery multiple divs

2 Answers