Ad

Sliding Up And Down Target Div Doesn't Work

- 1 answer

Good evening,

I am trying to make target div slide up and down (like to visible and hidden).

But links to that function don't work, when they are not in the same row (like in the same <p>). Just first one appears and then it just doesn't work... Nothing happens. Also, it should hide, when I click link to the opened <div> again. But it doesn't...

There is the code, I have no idea why it doesn't work properly... Thank you for the help!

JS:

    <script>
jQuery(function () {
    jQuery('.showSingle').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.targetDiv').eq(index).slideDown();
        jQuery('.targetDiv').not(newTarget).slideUp();

    });
});
 </script> 

HTML (not working version of links):

<table width="80%" border="0" align="center">
<tr width="100%"><td width="35%">
 <p align="center" style="font-size: 25px; color: ;"><a class="showSingle" target="1">Životní krizové situace<br />
 <span style="font-size:16px;">„Dovolte mi pracovat s Vámi, když jste v krizi.“</a></p>
</td>

<td width="30%">&nbsp;</td>

<td width="35%">
 <p align="center" style="font-size: 25px; color: ;"><a class="showSingle" target="2">Relaxace, meditace, imaginace<br />
 <span style="font-size:16px;">„Zastavte se a načerpejte sílu.“</a></p>
</td>
</tr> 

 </td>
</tr>
</table>

HTML (wokring version of links):

<p align="center" style="font-size: 22px; color: white; line-height: 55px;"><a class="showSingle" target="1">VIP Inkaso</a>
&nbsp;&nbsp;
<a class="showSingle" target="2">Vystěhování nájemníků</a>
&nbsp;&nbsp;
<a class="showSingle" target="3">Vymáhání pohledávek</a></p>

HTML (target div):

<div id="div1" class="targetDiv">
$text
</div>

<div id="div2" class="targetDiv">
text
</div>

CSS:

   .targetDiv {
    display: none
}
Ad

Answer

You may try this:

jQuery(function () {
    jQuery('.showSingle').click(function () {
        var index = jQuery('.showSingle').index($(this));
        jQuery('.targetDiv').eq(index).slideToggle().siblings('.targetDiv').slideUp();
       //up here, toggle the selected and closes the remaining

    });
});

In this case the function also up and down the element .targetDiv

Ad
source: stackoverflow.com
Ad