Home › Forums › JavaScript › JQuery Toggle with arrow
- This topic is empty.
-
AuthorPosts
-
October 24, 2009 at 3:39 pm #26541ekceteraMember
I’m building a list of FAQs that I want to toggle to expand the answer. I have it started. I don’t know JQuery very well, so I’m trying to find a tutorial online. I’ve found one, but now I want to add an arrow to the side of the header that will turn down when the section is toggled.
Here’s the script:
Code:// hover effect
$(document).ready(function() {
$(‘div.demo-show h3’).add(‘div.demo-show2 h3’).hover(function() {
$(this).addClass(‘hover’);
}, function() {
$(this).removeClass(‘hover’);
});
});// independently show and hide
$(document).ready(function() {
$(‘div.demo-show:eq(0) > div’).hide();
$(‘div.demo-show:eq(0) > h3’).click(function() {
$(this).next().slideToggle(‘fast’);
});
});// one showing at a time
$(document).ready(function() {
$(‘div.demo-show:eq(1) > div:gt(0)’).hide();
$(‘div.demo-show:eq(1) > h3’).click(function() {
$(this).next(‘div:hidden’).slideDown(‘fast’)
.siblings(‘div:visible’).slideUp(‘fast’);
});
});//simultaneous showing and hiding
$(document).ready(function() {
$(‘div.demo-show2:eq(0) > div’).hide();
$(‘div.demo-show2:eq(0) > h3’).click(function() {
$(this).next(‘div’).slideToggle(‘fast’)
.siblings(‘div:visible’).slideUp(‘fast’);
});
});//queued showing and hiding
$(document).ready(function() {
$(‘div.demo-show2:eq(1) > div’).hide();
$(‘div.demo-show2:eq(1) > h3’).click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings(‘div:visible’);if ($visibleSiblings.length ) {
$visibleSiblings.slideUp(‘fast’, function() {
$nextDiv.slideToggle(‘fast’);
});
} else {
$nextDiv.slideToggle(‘fast’);
}
});
});Here’s the CSS:
Code:.demo-show {
width: 350px;
margin: 1em .5em;
}.demo-show h3 {
margin: 0;
padding: .25em;
background: #bfcd93;
border-top: 1px solid #386785;
border-bottom: 1px solid #386785;
}.demo-show div {
padding: .5em .25em;
}And here’s the page I’m putting it on: http://www.ekcetera.com/faq/faq.php
I just want to add a little arrow that will toggle down and up when "Title" is clicked.
Can anyone help?
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.