CODEWITHSUNDEEP
jquery
user1525766
user1525766

Reputation: 27

Jquery help on sliding divs

Here is the HTML

<div id="projectheader">
Project 1
<span id="plus">+</span></div>
<div class="projectdrop">
<div id="orderheader"><span id="plus">+</span></div>
<div class="orderdrop"></div>
</div>

<div id="projectheader" style="margin-top: 20px;">
Project2
<span id="plus">+</span></div>
<div class="projectdrop">
<div id="orderheader"><span id="plus">+</span></div>
<div class="orderdrop"></div>

</div>

Im working on a site where the projects are created dynamically on the back end and the info is inserted into the projectheader on the front end. So there could be many div's with the ID of projectheader on the same page. What I'm looking to do is click on the + div and slide down the projectdrop. This is not a problem with only one project on the page but not able to get it working when multiple projectheader are on the page. I want to be able to slidedown only the specific projectheader I click on.

Thanks in advance.

Upvotes: 0

Views: 80

Answers (2)

LukeGT
LukeGT

Reputation: 2352

First of all, I highly recommend you rectify the duplicate ID issue, because it's not only bad practice but generates problems like this. It would seem like projectheader (and most of your other "IDs") are better used as classes, not IDs.

If you just want a solution that works however, I believe this will do the trick:

$('.plus').click(function(){
    $(this).parent().next('.projectdrop').slideDown();
}

Just change those spans to have the class plus instead of id plus. You cannot select multiple things using the one ID.

Note also that having to use the order of DOM elements in order to form relationships between them can be considered bad practice. It is better to wrap related elements inside a div or other appropriate element, which in turn has an ID or other identifying property attached to it. For example:

<div class="project" id="project1">
    <header>
        Project 1
        <span class="plus">+</span>
    </header>
    <div class="drop">
        <div class="order">
            <header>
                <span class="plus">+</span>
            </header>
            <div class="drop">
            </div>
        </div>
    </div>
</div>

Upvotes: 2

user1525766
user1525766

Reputation: 27

Figured it out.

$(document).ready (function() {
$('.plus').on('click', function() {
 $(this).parent().next('.projectdrop').slideToggle('slow');

Another question. How would I replace the + div with a - when the projectdrop is open?

Thanks

Upvotes: 1

Related Questions