What I would like here is to have a rollover on each button so
they change color when hovering over them.
When the button is clicked the arrow should point down and the menu opens with
the color of the button the same as the rollover.
Clicking an open button/menu I want it to change the arrow and colour again back to it’s closed state.
At the moment the rollover works until a button is clicked.
When a button is clicked the button changes color and the arrow changes.
If I click an open button it closes but the buttons arrow and color don’t change.
If I click another button the other button does change back.
Any help would be greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
*{
margin:0;
padding:0;
}
#wrap{
margin:50px;
}
.btn{
border-bottom:1px solid #ccc;
cursor:pointer;
padding:5px;
width:400px;
}
.first{
border-top:1px solid #ccc;
}
.content p{
padding:10px 10px 20px 10px;
width:400px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="btn first"><span></span><h4>One</h4></div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div><!-- #content -->
<div class="btn"><span></span><h4>Two</h4></div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div><!-- #content -->
<div class="btn"><span></span><h4>Three</h4></div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div><!-- #content -->
</div><!-- #wrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$('div.btn span').html('→');
$('div.btn').hover(function(){
this.css('background','#f3f3f3')
})
$('div.btn').click(function() {
$('div.btn span').html('→');
$('div.btn').css('background','white');
$(this).css('background','#f3f3f3');
$('span', this).html('↓');
if (!$(this).next().hasClass("open")) {
$('div.content.open').slideUp('normal', function() {
$(this).toggleClass("open");
});
}
$(this).next().slideToggle('normal', function() {
$(this).toggleClass("open");
});
});
$("div.content").hide();
</script>
</body>
</html>
I think you’re doing a bit of stuff with JS that should be in the CSS. Like hiding the accordions at the end of the script, so they flash open, then closed. Hide them from CSS first, then show them using JS. Also, don’t do styling from JS; add and remove classes so it’s easy to style up the colors with CSS, instead of embedding the colors in the JS. Same with HTML, if you can avoid it. I put the arrows in the HTML to begin with, but that’s up to you.
The jQuery hover event lets you call a function on hover in and hover out, so look at the script for how I used that. The problem with just adding and removing the color itself is that you’ll do it even when the accordion is open. Add and remove button hover and button open classes instead, so the hover and open states are independent.
Anyway, here’s my stab at cleaning up your code. Some people might want to do it differently, but there you go.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
*{
margin:0;
padding:0;
}
#wrap{
margin:50px;
}
.btn{
border-bottom:1px solid #ccc;
cursor:pointer;
padding:5px;
width:400px;
}
.first{
border-top:1px solid #ccc;
}
.content {
display:none;
}
.content p{
padding:10px 10px 20px 10px;
width:400px;
}
.btnHover, .btnOpen {
background:#f3f3f3;
}
</style>
</head>
<body>
<div id="wrap">
<div class="btn first"><span>→</span><h4>One</h4></div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div><!-- #content -->
<div class="btn"><span>→</span><h4>Two</h4></div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div><!-- #content -->
<div class="btn"><span>→</span><h4>Three</h4></div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div><!-- #content -->
</div><!-- #wrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>
</body>
</html>
Then your accordion.js file might look like this:
// Handle hovers. Would prefer to do this in CSS, but IE doesn't support hover on anything but A tags
$('div.btn').hover(
function() {
$(this).addClass('btnHover');
},
function() {
$(this).removeClass('btnHover');
});
$('div.btn').click(function() {
// Close accordion if it was clicked when open
if ($(this).next('.content').hasClass('open')) {
$(this).removeClass('btnOpen')
.find('span').html('→');
$('div.content.open').slideUp('normal', function() {
$(this).removeClass('open');
});
}
else {
// Close any open accordion
$('div.content.open').slideUp('normal', function() {
$(this)
.toggleClass('open')
.prev('.btn')
.removeClass('btnOpen')
.find('span').html('→');
});
// Update the button
$(this)
.addClass('btnOpen')
.find('span').html('↓');
// Open the accordion
$(this).next('.content').slideDown('normal', function() {
$(this).addClass('open');
});
}
});
