Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
Another option is to use the:focusselector which will make the hidden content to expand on mouse click.
The advantage of this selector is that the page stays still, however, we have to click anywhere "outside" to close the expanded content and besides this, the hidden content should be immediately after, with no intermediate tags:
Demo with focus
Link with focus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
The last 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. In this case, we'll use the:checkedselector:
Demo with checked
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
To apply these effects on the links and content that you want to hide and expand only on mouse click is very easy: when you create a post, paste one of the codes above inside the HTML box and replace the text in blue with the name of your link and add your text instead of the green one.
Like
3
Random Posts
Add A CSS Animated Share Button on Blogger17/02/2014 - 3 Comments
How to customize or edit the linkwithin related post widget10/02/2014 - 10 Comments
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger10/03/2012 - 115 Comments
Related Posts:
What is the difference between padd...
How to Add CSS code To Blogger usin...
How to add custom Variable definiti...
CSS3 Transition Property Basics
How to Increase Thumbnail Resoluti...
3 comments:
Jack Owen 1/14/2014
nice tips. thanks Reply
shehryar anwer 1/15/2014
Thankyou Reply
DHANANJAY GAWALI 3/11/2014
Nice Work Reply
Add comment
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED
Search
Search
Follow on Facebook
Helplogger
Like
2,775 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
Joseph V M
Hi, I've added pagination to my blog...
dara king
good
Mel Ancheta
You did it finally, thanks admin (: sorry for my late reply...
Sandra Harriette
It never ceases to amaze just how much we can do with Blogger....
Gabor Sziladi
One question i still have...how can i keep distance between my...
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger
3
Like
No comments:
Post a Comment