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!!!
