jquery all divs opening and closing when toggle is clicked_问答_开发者

When i click in a link all the divs with the relevant classes open and close.

How do I apply the .this function to the jquery? i This is the code I have, I would only like to activate the the one that is clicked

$(document).ready(function(){   
    //On Click
    $('.collapseLink').click(function(){
        $('.revealBoxContents').stop(true, true).slideToggle('slow');
    });
});

here is the html unfortunatly I am not allowed to change this markup

<div class="revealBox revealBoxClosed">
            <div class="revealBoxTop">
                <h3>About You</h3>
           <a class="collapseLink" title="" href="javascript:void(0);"><span class="dottedBot">Hide information</span><img width="16" height="16" class="detailListActions" alt="-" src="Resources/Images/BBG/main/minus.gif"></a>              </div>
            <!-- /revealBoxTop -->
         <div class="revealBoxContents" style="display: block;">
           <div class="detailListHead pad10">
              <span class="floatLeft">Details about you </span>
             <span class="floatRight">Edit</span>
             <div class="clearBoth"></div>
           </div>

            <ul class="revealDetailsList">
              <li class="table shadedList ">
             <div class="tableRow">
              <span class="detailCell detailLabel">Your Name:</span>
              <p class="detailResult">Mr John Smith</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>

             </div><!-- /tableRow -->
                          </li>
              <li class="table">
             <div class="tableRow">
              <span class="detailCell detailLabel">Gender:</span>
              <p class="detailResult">Male</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table shadedList ">
             <div class="tableRow">
              <span class="detailCell detailLabel">Date of Birth:</span>
              <p class="detailResult">11/11/1977</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table">
             <div class="tableRow">
              <span class="detailCell detailLabel">Postal Address:</span>
              <p class="detailResult">1 Buchanan Street, Derby, Derbyshire, DE1 3BZ 1 Buchanan Street, Derby, Derbyshire, DE1 3BZ</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table shadedList ">
             <div class="tableRow">
              <span class="detailCell detailLabel">Relationship Status:</span>
              <p class="detailResult">Married</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table">
             <div class="tableRow">
      开发者_StackOverflow社区        <span class="detailCell detailLabel">Daytime/Mobile Telephone:</span>
              <p class="detailResult">01977 123245</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table shadedList ">
             <div class="tableRow">
              <span class="detailCell detailLabel">Email Address:</span>
              <p class="detailResult">john.smith@email.com</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table">
             <div class="tableRow">
              <span class="detailCell detailLabel">Date you wish your insurance to start:</span>
              <p class="detailResult">2/03/2011</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table shadedList ">
             <div class="tableRow">
              <span class="detailCell detailLabel">Employment Status:</span>
              <p class="detailResult">Employed</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table">
             <div class="tableRow">
              <span class="detailCell detailLabel">Your Occupation:</span>
              <p class="detailResult">Marketing Manager</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table shadedList ">
             <div class="tableRow">
              <span class="detailCell detailLabel">Business Type:</span>
              <p class="detailResult">Insurance Broker</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>
              <li class="table lastLi">
             <div class="tableRow">
              <span class="detailCell detailLabel">Joint Policy Holder:</span>
              <p class="detailResult">Mrs Jane Smith</p>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
             <a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
             </div><!-- /tableRow -->
                            </li>

           </ul><!-- /revealDetails -->
                <div class="relative">
                <a class="collapseLink floatRight" title="" href="javascript:void(0);"><span class="dottedBot">Hide information</span><img width="16" height="16" class="detailListActions" alt="?" src="Resources/Images/BBG/main/minus.gif"></a>               
            </div>
         </div><!-- /revealBoxContents -->
       </div>

You wrap this with the jQuery $ operator:

$(document).ready(function(){   
    //On Click
    $('.collapseLink').click(function(){
        $(this).parent().next(".revealBoxContents").stop(true, true).slideToggle('slow');
    });
});

As one commenter mentioned, this will only work if it is within the link. .closest() may help you in place of find() if it is outside.

If you post your HTML we might be able to help more.

this works:

$(document).ready(function() {
    //On Click
    $('.collapseLink').click(function() {
        $(this).parent().next('div.revealBoxContents').stop(true, true).slideToggle();
    });
});

look at this jsfiddle: http://jsfiddle.net/RVjbY/1/

If the link is inside the div you want to toggle, try this

$(document).ready(function(){   
    //On Click
    $('.collapseLink').click(function(){
        $(this).parents('.revealBoxContents').stop(true, true).slideToggle('slow');
    });
});

Basically, idea is to choose the toggling div, relative to clicked link (usually using this);

Happy Coding.