Toggle does not work when pressed
Is there anyway I can make the div left black sometime active?
Basically, I have:
<div class="navigation-box">
<div class="sidehead"><i class="lock"></i><span class="title">User Account</span> <span class="toggle">+</span></div>
<ul class="navLinks">
<li>11SS</li>
<li>2</li>
<li>3</li>
</ul>
</div>
And once it is frozen, it shows a black background. But what I want to do remains black, once clicked.
perfect example is this mock http://cdn2.mosaicpro.biz/smart/php/admin/projects_grid.html?v=v1.0.0-rc1 (just click the access link and see how it is)
What I am trying to do. I thought I could use CSS, but it doesn't seem to work. Any suggestions?
source to share
You just need to add the active class when you click. Like below code.
$(function () {
$('.navigation-title').click(function () {
$('.navigation-item').removeClass('active');
$('.navgation-links').slideUp('active');
$('.navigation-title .toggle').text('+');
$(this).parent().addClass('active');
$(this).find('.toggle').text('-');
$(this).next().slideDown();
});
});
I ran the fiddle and changed the structure a bit.
source to share
If you only want to use CSS, then I think it should be possible using the exposed CSS hapcode. Basically, you will use input[type=checkbox]
to act as a kind of "binary" check: is the list item selected OR not?
A short explanation of what I changed:
- Added an element
input[type=button]
in front of each.sidehead
div element . - Moved the buttons
9999px
up and left so they are hidden off the screen. - Changed each
.sidehead
div element tolabel
one that is associated with its previous button. This way you click on the label and it will test the button.
Since buttons can also be checked as well as checked, this means that you can click the label again and remove the color change, resulting in an "unselected" appearance.
The only drawback to this method is that since your JavaScript hides one list item when you click on another, it results in awkward non-color labels when another label is clicked, so you will have to automatically update your JavaScript to uncheck any list item that collapsed.
Here's the new HTML and CSS:
HTML:
<div class="navigation-box">
<input type="checkbox" id="button1" />
<label for="button1" class="sidehead"><i class="lock"></i><span class="title">User Account</span><span class="toggle">+</span>
</label>
<ul class="navLinks">
<li>11SS</li>
<li>2</li>
<li>3</li>
</ul>
</div>
CSS
body {
font-family: Verdana;
font-size: 11px;
color: #333;
background: #e1e0de;
margin: 0;
padding: 0;
}
#navigation-body {
clear: left;
margin-top: 40%;
position: absolute;
float: left;
left: -6%;
right: -7%;
}
.sidehead {
padding: 6px 6px 4px 0;
cursor: pointer;
display: block;
}
.sidehead:hover {
background: #191919;
}
.sidehead .lock {
background: url('../images/lock.png') no-repeat center;
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle;
margin-top:-5px;
margin-left:5%;
}
.sidehead:hover .lock {
background: url("../images/lock-hover.png") no-repeat center;
}
.sidehead span.title {
font-weight: 600;
font-size: 12px;
padding-left: 4px;
}
.sidehead:hover {
color: white;
}
span.toggle {
float: right;
margin-top:3px;
display: inline-block;
right:4%;
left:90%;
position: absolute;
cursor: pointer;
}
ul.navLinks {
margin:0;
padding-left:35%;
background: #191919;
}
input[type=checkbox] {
position: absolute;
left: -9999px;
top: -9999px;
}
input[type=checkbox]:checked ~ .sidehead {
background: #191919;
color: white;
}
source to share