Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help With Parent/Sibling Function (jQuery)

    Hi all, I have been trying to make this work for some time now and the project's deadline is coming up. So any help is really appreciated...

    I have a div which contains 4 buttons (links) and 4 div's with content in them. Each button has a onclick event which toggles a jQuery slideUp and slideDown action to the div which correlates to the button.

    The problem is that there are many of these divs that have 4 buttons and 4 divs in them with the same class names. So every time a button is clicked on one of them, the div that correlates on all of them slide out. Heres a screenshot to better understand the functionality.



    Heres my javascript:


    //button 1
    function slideSend(class) {
    var className = document.getElementsByClassName(class);
    var status = document.getElementsByClassName(class).style.display;

    if (status == 'none'){
    $(className).slideDown('slow');
    } else {
    $(className).slideUp('slow');
    }
    }

    //button 2
    function slideImages(class) {
    var className = document.getElementsByClassName(class);
    var status = document.getElementsByClassName(class).style.display;
    alert(className);
    if (status == 'none'){
    $(className).slideDown('slow');
    } else {
    $(className).slideUp('slow');
    }
    }

    button 3
    function slideLocation(class) {
    var className = document.getElementsByClassName(class);
    var status = document.getElementsByClassName(class).style.display;

    if (status == 'none'){
    $(className).slideDown('slow');
    } else {
    $(className).slideUp('slow');
    }
    }

    //button 4
    function slideFloorplan(class) {
    var className = document.getElementsByClassName(class);
    var status = document.getElementsByClassName(class).style.display;

    if (status == 'none'){
    $(className).slideDown('slow');
    } else {
    $(className).slideUp('slow');
    }
    }


    and heres the markup:

    Code:
    <div class="list_block">
    
    <div class="controls">
      <a onclick="slideImages('img_extended');">View More Images</a>
      <a onclick="slideFloorplan('flrPlan_extended');">View Foor Plan</a>
      <a onclick="slideLocation('location_extended');">View Location</a>
      <a  onclick="slideSend('send_extended');">Send to a Friend</a>
    </div>
    
    
     <div class="img_extended"><!--content--></div>
     <div class="flrPlan_extended"><!--content--></div>
     <div class="location_extended"><!--content--></div>
     <div class="send_extended"><!--content--></div>
     
    </div>
    
    <!--New List Item-->
    
    <div class="list_block">
    
    <div class="controls">
      <a onclick="slideImages('img_extended');">View More Images</a>
      <a onclick="slideFloorplan('flrPlan_extended');">View Foor Plan</a>
      <a onclick="slideLocation('location_extended');">View Location</a>
      <a  onclick="slideSend('send_extended');">Send to a Friend</a>
    </div>
    
    
     <div class="img_extended"><!--content--></div>
     <div class="flrPlan_extended"><!--content--></div>
     <div class="location_extended"><!--content--></div>
     <div class="send_extended"><!--content--></div>
     
    </div>
    
    <!--New List Item-->
    
    <div class="list_block">
    
    <div class="controls">
      <a onclick="slideImages('img_extended');">View More Images</a>
      <a onclick="slideFloorplan('flrPlan_extended');">View Foor Plan</a>
      <a onclick="slideLocation('location_extended');">View Location</a>
      <a  onclick="slideSend('send_extended');">Send to a Friend</a>
    </div>
    
    
     <div class="img_extended"><!--content--></div>
     <div class="flrPlan_extended"><!--content--></div>
     <div class="location_extended"><!--content--></div>
     <div class="send_extended"><!--content--></div>
     
    </div>
    So I somehow need to target the parent "list_block" class of the div that should be opening with out activating the others. Thanks again.

  • #2
    New to the CF scene
    Join Date
    Jan 2009
    Location
    Berkshire, UK
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Try more jQuery?

    The reason that all of the div's are being affected is that you have passed the "global" class to the jQuery sliding methods.
    There are a number of ways to fix this but I would recommend re-evaluating how you are triggering the changes.

    In order for jQuery to modify the elements inside the same div that was clicked, you need to give jQuery some idea of where the event has been triggered on the page. By handling all of the triggering inside jQuery, you reduce the complexity of the function structure on the page and refine the amount of code at the same time.

    First of all, remove all of the onclick functions from the <a> links and assign a class to the tag instead (i.e. <a class="img_extended">). We will tell jQuery that clicking any <a> element of the class img_extended, means that we want to modify the div of the same class (inside the same contining div).

    <script type="text/javascipt">
    $(document).ready(funciton(){
    $('a.img_extended').click(function(){
    showHideDiv($(this).parent().find('div.img_extended'));
    });
    });

    function showHideDiv(theDiv) {
    if ($('theDiv').is(':visible')) {
    $('theDiv').slideDown('slow');
    } else {
    $('theDiv').slideUp('slow');
    };
    });
    </script>

    The important code is on line 4:

    showHideDiv($(this).parent().find('div.img_extended'));

    Here we tell jQuery to move its focus from the <a> element that was clicked, to its parent div and then look for the child div by class. Now jQuery can modify the div but only inside the same parent div as the link tag.

    I have had to rush this a bit and the code can still be refined, but it should give you some idea of a different approach to take. What you need to do is repeat lines (3-5) so that you have a block of code for each <div> class.

    I hope this helps, good luck with the project,

    Dan


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •