Question

Basically I have a series of projects displayed on the page.

Each project consists of a container div, an image div inside, then a button inside that div. With another div there which is set to ‘Display:none’. When the user clicks the ‘button inside’ the div set to ‘display:none’ slideToggles on each click…

I will have many of these on a page and am currently having to add new lines of code for the new ‘id’ of the button and the sliding div… Is there a way to detect the sliding div which is a child to the image div?

The current code I am using is:

$(function(){
    $("#lifestyledropdown").click(function(event) {
        event.preventDefault();
        $("#lifestyleimages").slideToggle();
    });

    $("#camarguedropdown").click(function(event) {
        event.preventDefault();
        $("#camargueimages").slideToggle();
    });
});

Each follow the same pattern:

Project 1:
div id = ‘name-A’dropdown (id of the button to activate the slide toggle)
div id = ‘name-A’images (id of the div that slides down)

Project 2:
div id = ‘name-B’dropdown (id of the button to activate the slide toggle)
div id = ‘name-B’images (id of the div that slides down)

Each project will have the same layout just different content so I am assuming I can use a code to detect the ‘name section’?

HTML for the projects:

<div class="projectcontent">
<div class="projectimg"><img src="images/imagemain.jpg" alt="project" />

<div id="gallerybutton">
<a href="#" id="lifestyledropdown"><img src="images/gallerycollapsewhite.png" alt="project" class="gallerycollapse"/>
<img src="images/gallerycollapseblack.png" alt="project" class="gallerycollapseB"/></a>
</div>

<div class="projecttext" style="color:#FFF;text-align:left;">
<img src="images/breakshortwhite.jpg" />

<p2>PROJECT NAME<br />
ESTOTAS AUT ALICIENI QUIBUS EXPEROR ESTIAT ESTO VOLORPORRUM EARIORIT EUM EUM ATE CUS MO ET ATEM. TAE RE VELENDI GNIATUR, UTATE ET PORUM HARIBER AERORATISI BLACCUP TATIBEA TIOREPE LLIQUAE PELENIH ILIBEA SAPITAM EUM MEUN.<p2>
</div>

<div class="expandablebox" id="lifestyleimages" style="display:none;">
<div class="projectimg"><img src="images/image-slider.jpg" alt="project" />
</div>
</div>
</div>
</div>

Answer 1

You can use the “ends with” $= selector to get all dropdown ids and then use next() to slideToggle() the subsequent div:

$('div[id$="dropdown"]').click(function(ev){
    ev.preventDefault();
    $(this).next().slideToggle();
});
​

See demo 1

If the images divs don’t necessarily directly follow the dropdown divs, you can use some regex to accomplish the task:

$('div[id$="dropdown"]').click(function(ev){
    ev.preventDefault();
    $toggleDiv = $('#' + this.id.replace(/^(.*?)dropdown$/, '$1images'));
    $toggleDiv.slideToggle();
});
​

See demo 2