Apply function to only one div class, not all

Question

I'm currently working on a location page on a website and am having trouble with a show/hide jquery effect. The jQuery below activates on-click and applies toggles the class of a div to show/hide it... pretty straightforward. However, when I add more divs with the same class and click on the activator link, it runs the functions on all of the divs. I know this is a simple fix, but I can't figure out the right syntax. Could anyone take a quick look at this code and see about how I could fix it. I only included one of the html divs below. It's when I have more than one that causes the problem. See example here.

Thanks, Taylor

jQuery

$(function(){
    $(".sliding").hide();
    $(".show-hide").show();
    $(".hide-click").show();

    $('.show-hide').click(function(){   
        $(".sliding").slideToggle("slow");
        $(".hide-click").slideToggle("slow");
    });
});

HTML

<!-- Bowie, MD -->
<div class="location" style="margin-top: 0;">

<!-- City Name -->
<h3><a href="javascript:void(0);" class="show-hide">Bowie</a></h3>

    <h2>Address</h2>
    <p>16901 Melford Blvd, Suite 11<br/>
    Bowie, MD 20715</p>

    <h2>Contact</h2>
    <p><span><strong>Phone:</strong> 301.805.5395</span><br />
    <span><strong>Fax:</strong> 301.805.5396</span></p>

    <span class="hide-click"><a href="javascript:void(0);" class="show-hide">View additional info</a></span>

    <!-- Hidden Content -->
    <div class="sliding">

        <h2>Map</h2>

        <div class="map">   
            <iframe width="211" height="140" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=16901+Melford+Blvd,+Suite+11+Bowie,+MD+20715&amp;sll=37.0625,-95.677068&amp;sspn=61.023673,112.236328&amp;ie=UTF8&amp;hq=&amp;hnear=16901+Melford+Blvd,+Bowie,+Maryland+20715&amp;ll=38.959742,-76.714354&amp;spn=0.009344,0.018196&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
        </div>

        <a href="http://maps.google.com/maps?f=d&source=s_d&saddr=16901+Melford+Blvd,+Suite+11+Bowie,+MD+20715&daddr=&hl=en&geocode=&mra=prev&sll=38.959741,-76.714349&sspn=0.00755,0.013422&g=16901+Melford+Blvd,+Suite+11+Bowie,+MD+20715&ie=UTF8&z=17" target="_blank" class="directions">Get Directions</a>

        <h2>Doctors</h2>
        <p><a href="/#phillips.php">William B. Phillips, II M.D.</a>, <a href="/#weichel.php">Eric D. Weichel, M.D.</a></p>
        <a href="javascript:void(0);" class="show-hide">Hide additional info</a>

    </div>
    <!-- end Hidden Content -->

</div>
<!-- end Location -->

Thank you all for your help. I definitely had the right logic going in my head and I was trying .parent() and other delegation selectors, but @joekarl really nailed it by going and finding parent elements and then working back down the list from there to make it specific to the current div. Just what I needed. Thank you all, again. — Taylor T., Jun 14 '11 at 17:16

score 4 · Accepted Answer · answered Jun 14 '11 at 16:58

If I understand correctly, you're wanting just the .sliding content that's associated with its .show-hide link to toggle. You can set the jQuery context to find the correct .sliding element. This way you don't assume that the element is at a certain position and you're not tied to unique css ids allowing more flexibility.

$(function(){
    $(".sliding").hide();
    $(".show-hide").show();
    $(".hide-click").show();

    $('.show-hide').click(function(){   
        //find the surrounding div
        var location = $(this).parent().parent();

        //find the correct elements within the location block
        $(".sliding",location).slideToggle("slow");
        $(".hide-click",location).slideToggle("slow");
    });
});

score 3 · Answer 2 · answered Jun 14 '11 at 16:51

3

You can use the :first or :nth-child selectors.

See the JQuery documentation:

http://api.jquery.com/nth-child-selector/

http://api.jquery.com/first-selector/

Example:

$(".sliding").hide();

answered Jun 14 '11 at 16:51

Andrew Curioso

2,181
13
24

score 1 · Answer 3 · answered Jun 14 '11 at 16:47

You can give your div an id, and then use #divID in your jQuery selector to only select that one div:

$('#divID').hide();

The whole point of an ID is that it can only be applied to one element in the page, whereas classes can be applied to any number of elements.

score 1 · Answer 4 · answered Jun 14 '11 at 16:47

Two options are:

1) to use an id selector as the argument to $() and add an id attribute to only the one div you want,

<div id="someid"> and then js looks like this $("#someid").show()

2) Use $( $().get(N) ).show() where N is the known index of the div you want to affect. Hard to recommend this solution, though, as it has a greater chance of breaking down if you re-format the page.

score 1 · Answer 5 · answered Jun 14 '11 at 16:53

1

for the div you can use

  $(this).parents(".sliding").slideToggle("slow")

answered Jun 14 '11 at 16:53

Kanishka Panamaldeniya

17,302
31
123
193

score 1 · Answer 6 · answered Jun 14 '11 at 16:54

I would do it like this.

Firstly set up all your divs other than the first one with the class dn set to display:none in your css.

Then your javascript you could do something like this. I'm assuming you want your click triggers to be visible always.

$(function(){

    $('.show-hide').click(function(){

        $(".sliding").slideUp("slow");
        $(this).next(".sliding).slideDown("slow");

   });
});

score 0 · Answer 7 · edited May 23 '17 at 12:02

0

For example:

$(".sliding:eq(0)").slideToggle("slow");

will set it to the first element of class ".sliding".

See: How to get nth jQuery element

edited May 23 '17 at 12:02

Community

1
1

answered Jun 14 '11 at 16:52

Scherbius.com

3,396
4
24
44

Hey guys, thank you for the answers. This doesn't work because I don't want it to only activate the first item on the page. I want the same script to apply to other divs on the page as they're clicked on. Please view the example here: http://rgw.steadfastdesignfirm.com/#locations.php – Taylor T. Jun 14 '11 at 17:05

Apply function to only one div class, not all

7 Answers7

Linked