Question

Hey everyone I have a script problem once again. I’m doing a jQuery show/hide for my members profile data in post. Please visit http://www.pimpkings.com/t3-what-up-everyone to see what i’m talking about, I’m leaving the code on so you can see what it’s doing.

Every time I click on one persons show/hide it opens everyones and i only want it to open 1 persons at users request.

codes are-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
 $(".show_hide").show();
    $('.show_hide').click(function(){

$(".slidingDiv").slideToggle();

});

});
</script>

Then the html coding is

<span class="show_hide" style="cursor:pointer;color:#c0c0c0;">Show/hide</span>
<div class="slidingDiv">
                              <!-- BEGIN profile_field -->
                            <center>    {postrow.displayed.profile_field.LABEL} <center/>
                            <center>  {postrow.displayed.profile_field.CONTENT} <center/>
                            <center>  {postrow.displayed.profile_field.SEPARATOR}<center/>
                            <!-- END profile_field -->
                            <center>{postrow.displayed.profile_field.LABEL}<center/>
                            <center>Online Status<center/><br/>
                            <center>{postrow.displayed.ONLINE_IMG}<center/>
                                        {postrow.displayed.POSTER_RPG} <br />

                            <!-- BEGIN contact_field -->
                             <br/> <br/>
                            {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG}  
                            {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT}
                            <!-- END contact_field -->
                              <span class="show_hide" style="cursor:pointer;color:#c0c0c0;">hide</span></div>
                            </span>

Can anyone help figure out another selector so it does not open all at once?

Answer 1

Try this:

$(document).ready(function() {
    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function() {
        $(this).next(".slidingDiv").slideToggle();
    });
});​

Note that you should probably change the class of the “hide” link at the end of the profile to something else (e.g just hide) so that you can more easily target it with jQuery to hide the profile.

Oh and one other thing, the <center> tag was deprecated a long time ago. Use CSS to center instead.

jsFiddle example