Help With Parent/Sibling Function (jQuery)

[iisthesloth]

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:

<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.

[DanC82]

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