How to create a toggle or expanded click events

If you want to create an events for your blog. Your options is to show only the title and the content is hidden then this expanded click events is nice to use.

This method is more fancy even though it requires more tags but it works the best since it allows us to create a toggle effect, i.e., expand on click and then collapse when clicking again.

Demo: Click Me

Livewirez.blogspot.com. This s to test the code for fancy toggle or expanded click event.
Thanks for dropping by. Just simply say thank you.

Here's the code:

<style>
.checked-selector {display: none;}
:checked ~ .checked-selector {display: block;}
input.hidden[type=checkbox] {position: absolute;left: -999em;}
</style>
<label for="toggle-hidden">Demo</label>
<input class="hidden" id="toggle-hidden" type="checkbox" />
<div class="checked-selector">
Livewirez.blogspot.com. All content here.
</div>

Demo -  the name of label to click
With Red Color - is the content

How to install:

Just simply place that code inside HTML box.