CODEWITHSUNDEEP
htmlcss
kayduh
kayduh

Reputation: 318

CSS Click Events

So I found a fiddle example using :hover as a selector to hide a div tag until something is moused over a selected area. I have been doing some research but to no avail, how would I change :hover to something that would be more of a "onclick"

http://jsfiddle.net/rakesh_vadnal/RKxZj/1/

HTML

<div id="button"><h3>button</h3>
    <div id="two">Hovered content</div>
</div>

CSS

#button {
    background:#FFF;
    position:relative;
    width:100px;
    height:30px;
    line-height:27px;
    display:block;
    border:1px solid #dadada;
    margin:15px 0 0 10px;
    text-align:center;
}
#two {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DADADA;
    color: #333333;
    width:98px;
    height: 0;
    overflow:hidden;
    left: 0;
    line-height: 20px;
    position: absolute;
    top: 30px;
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease;
}
#button:hover > #two {
    display:block;
    left:0px;
    height:100px;
}

Upvotes: 3

Views: 15306

Answers (5)

Josh Crozier
Josh Crozier

Reputation: 240928

The checkbox approach minitech mentioned would look like this:

Example Here

HTML

<div id="button">
    <label for="toggle">
        <h3>button</h3>
    </label>
    <input id="toggle" type="checkbox"/>
    <div id="two">Content</div>
</div>

Modified CSS

[type="checkbox"]:checked + #two {
    display:block;
    left:0px;
    height:100px;
}
[type="checkbox"] {
    display:none;
}

As a side note, i'm not sure whether it is correct for a label element to wrap a h3 element. A span element would probably be a better fit.

JavaScript approach (example):

var button = document.getElementById('button');
button.querySelector('h3').addEventListener('click',function(){
    button.classList.toggle('open');
});

CSS

#button.open #two {
    display:block;
    left:0px;
    height:100px;
}

This method's support can be found here.

Upvotes: 1

The4thIceman
The4thIceman

Reputation: 3889

Another possibility is to use toggle()

$("#button").mouseup( function () {
    $("#two").toggle();
})

jquery toggle() will switch between display:none and showing it. So instead of switching classes, you can toggle an other div

Upvotes: 0

sheriffderek
sheriffderek

Reputation: 9043

Sounds to me like it's time for you to learn a little jQuery (javascript)

Checkbox is cool for sure - but still problematic in certain cases as of this post.

an .on('click', function({ // do stuff }); Is the way to go.

// don't forget to include jQuery

$('.your-element').on('click', function() {
    $('.your-other-element').toggleClass('your-special-class'); 
});

Here is a jsFiddle with a full example to help explain the basics.

Upvotes: 0

abbotto
abbotto

Reputation: 4339

You can find several examples of how to do this here.

The author goes over 4 methods:

 Checkbox hack
:target way
:focus way
Transition hack

DEMO

Upvotes: 0

Ry-
Ry-

Reputation: 224913

:active means “while this element is activated”. One condition for that is a mouse click, but it’s generally while the mouse button is depressed; it’s not persistent.

If you need persistence, you’ll be able to use a <details> element eventually; in the meantime, a hidden checkbox combined with a <label> and a selector along the lines of :checked + .something is common. You might consider just using JavaScript at that point, too.

Remember to respect keyboard focus, by the way.

Upvotes: 7

Related Questions