Activate Multiple Div Slide Effects with One Button
Hello all,
I have been using the javascript and html below. In the html, there are 3
links. When a link is clicked, a div slides out from the bottom of the link.
I have about 20 of these links on my page and I'd like to give the user an
option to open all of the sliding divs at once by clicking on one link.
Does anyone know how I could create one html link that would be able to open
all of the sliding divs on the page? I'm new to jQuery and don't really know
where to start.
Appreciate any help,
Andre
JAVASCRIPT (slide.js)
—————————————————————
$(document).ready(function() {
$('#slidebox').hide();
$('a.slide').click(function() {
var id = $(this).attr('id');
$('#slidebox' + id).slideToggle("medium");
// alert(id);
return false;
});
});
HTML
(The link examples have been turning into actual links in the forum preview.
This is what they look like, with the words 'open' and 'close' added to the
tags. The 'id' and 'name' numbers correspond to the link number. <open a
href="#" id="1" class="slide" name="1">Link 1<close a>)
—————————————————————
<script type="text/javascript" src="javascript/jquery-1.2.6.js"></script>
<script type="text/javascript" src="javascript/slide.js"></script
# Link 1 <br />
<div id="slidebox1" class="slidebox" style="display:none"><hr class="slide"
/>
<p class="slide">Phasellus in dolor. Sed ultrices, lorem id iaculis dapibus,
risus velit elementum leo, ac luctus enim tortor eget eros. Aliquam erat
volutpat. Donec ac odio. Curabitur vulputate leo. Maecenas tincidunt
consequat velit. Aenean rhoncus pede nec sapien. Sed tempor tempus velit. Ut
erat purus, ornare a, rhoncus vitae, sodales quis, eros. Quisque blandit
suscipit nunc. Nam sapien.
</div>
# Link 2 <br />
<div id="slidebox2" class="slidebox" style="display:none"><hr class="slide"
/>
<p class="slide">Phasellus in dolor. Sed ultrices, lorem id iaculis dapibus,
risus velit elementum leo, ac luctus enim tortor eget eros. Aliquam erat
volutpat. Donec ac odio. Curabitur vulputate leo. Maecenas tincidunt
consequat velit. Aenean rhoncus pede nec sapien. Sed tempor tempus velit. Ut
erat purus, ornare a, rhoncus vitae, sodales quis, eros. Quisque blandit
suscipit nunc. Nam sapien.
</div>
# Link 3 <br />
<div id="slidebox3" class="slidebox" style="display:none"><hr class="slide"
/>
<p class="slide">Phasellus in dolor. Sed ultrices, lorem id iaculis dapibus,
risus velit elementum leo, ac luctus enim tortor eget eros. Aliquam erat
volutpat. Donec ac odio. Curabitur vulputate leo. Maecenas tincidunt
consequat velit. Aenean rhoncus pede nec sapien. Sed tempor tempus velit. Ut
erat purus, ornare a, rhoncus vitae, sodales quis, eros. Quisque blandit
suscipit nunc. Nam sapien.
</div>
--
View this message in context: http://www.nabble.com/Activate-Multiple-Div-Slide-Effects-with-One-Button-tp18880908s27240p18880908.html
Sent from the jQuery UI Discussion mailing list archive at Nabble.com.