Hide Content Using Toggle Effect In Blogger

hide content through toggle effect
Recently, I made a post on how to make a content spoiler in blogger and many of it have benefited. Although, some of it got confused on its application but at the end they have  arrived at a better result. Today, I am thinking to publish an article on hiding the  blog content using a different code on that previous post.  Take a look at the live below:

Lorem ipsum dolor sit amet, cum wisi virtute eu, sit illum molestie ne.
Pro ad tollit dictas, ad quo erat eloquentiam, te quis indoctum quo.
Quo no quas legendos prodesset, in ponderum percipitur eam, vim inermis cotidieque ea.
Vis ei labores offendit iracundia, sed ea tantas delenit verterem. In nec delectus pericula.

Duo ex menandri recusabo elaboraret, enim luptatum mei id.
Ius velit dicam consectetuer eu, his tollit nonumes dignissim ne.
Labore commodo expetendis mei at. Dico accusam pri te.

Quaestio consequat cu vel, nec ei tota dolorem definitiones.
Ex cum luptatum convenire, ius ne labores postulant, in alii cibo vivendo quo.
Tation fuisset eu qui. Ut nec altera quodsi audire.
Cum te partem gloriatur, ut his civibus interpretaris, alii nostrum consequuntur in sed.
An quo lorem causae.

Et audiam tritani mea. Integre inimicus qui in, te pri latine prodesset.
Usu audire vocibus lucilius ad, has affert nusquam recusabo id.
At agam putant civibus qui, sed te graecis forensibus, dicta omnium appellantur ius an.
Ei rebum fabulas quo, ius dicit luptatum ut.
Et mucius possit vix, has id eirmod explicari referrentur, vis melius sensibus interpretaris .

Cu mel platonem necessitatibus, in nam appetere torquatos adversarium, cum cu dicta repudiare .
Minim platonem splendide mel te, pro sale doming ei.
Sed cu ferri liber oportere. Tale illud scripserit no usu.
Cu eos diam assueverit comprehensam, ea vix oporteat nominati.

Hiding Content Using Toggle Effect


Go to Blogger Dashboard
Click Post or New Post
Switch your Blogger Post Editor's Page in HTML Mode
Copy and Paste the code below:
Note: If you want to use this effect in most of your posts, you can simply copy the code within the style attributes only and paste it to your Blogger's template above the code ]]></b:skin>

<style>label.code-button { background: #3498db; background-image: -webkit-linear-gradient(top, #168eca, #ddd); background-image: -moz-linear-gradient(top, #168eca, #ddd); background-image: -ms-linear-gradient(top, #168eca, #ddd); background-image: -o-linear-gradient(top, #168eca, #ddd); background-image: linear-gradient(to bottom, #ddd, #2980b9); -webkit-border-radius: 5; -moz-border-radius: 5; border-radius: 5px; font-family: Arial; color: #ffffff; font-size: 12px; padding: 5px 5px 5px 5px; text-decoration: none;}
.checked-selector1, .checked-selector2, .checked-selector3, .checked-selector4 { max-height: 0; max-width: 0; opacity: 0; overflow: hidden; white-space:nowrap;-webkit-transition:all 1.5s ease; -moz-transition:all 1.5s ease; -o-transition:all 1.5s ease; transition:all 1.5s ease; }
input[type=checkbox]:checked ~ .checked-selector1, input[type=checkbox]:checked ~ .checked-selector2, input[type=checkbox]:checked ~ .checked-selector3, input[type=checkbox]:checked ~ .checked-selector4 { max-height: 100%; max-width: 100%; opacity: 1;}
input[type=checkbox] { height: 0; width: 0; opacity: 0; }
</style>

<br />
<center>
<label class="code-button" for="toggle-hidden1">Click to see the code</label></center>
<input id="toggle-hidden1" type="checkbox" />

<br />
<div class="checked-selector1">
Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here
</div>


Save your work and you're done!

Note:
If you have more than one content to hide, you can use the div class below respectively:
<div class=".checked-selector2">
 <div class=".checked-selector3">
 <div class=".checked-selector4 ">

Thanks for the time and God Bless Folks!!!
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook


Express yourself!
2 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV
  1. Where can one find the best birthday party catering in Bangalore for a child's birthday party?

    it is now easier than ever to find the best birthday party catering in Bangalore.Dialjordan is

    the India’s one of the emerging online business listing website.Dialjordan Local Internet

    Search Engine India, Internet Business Directory Provides Information about Companies, Services

    and products All Indian Cities.caterer service in bangalore


    ReplyDelete
  2. It's amazing. Excellent blog. Thank you for sharing this wonderful information. Shree Caterers offers professional and affordable wedding planning services in Bangalore. If you want our services, feel free to contact us. Wedding Planners in Bangalore | Brahmin Wedding Planners in Bangalore | Brahmin Marriage Contractors in Bangalore | Brahmin Wedding Caterers in Bangalore | Tamil Brahmin Wedding Caterers in Bangalore

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...