Show & Hide Content with Image Expansion for Blogger


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


Show and hide content with CSS
Probably, you may have noticed Twitter and Apple use a brilliant technique for loading more information. Yeah! today were gonna learn how you can easily hide your extra bits of content using CSS Code snippet, to be revealed at the click of a Show More button with hover effect. I presume itll be a great trick to keep more info within your blog post without refreshing your page. Also theres an image that turn out to be original size while you clicking show more button.

Interested? Yeah! As always, you can see a demo screenshot that I named by screening the widget in action. Also Ive already applied it to jsFiddle show you how this widget looks like. You can visit our demo blog and also able to download the CSS Code snippet following via link provided below.




Please note: I think, for newbies itll be a little bit complicated, because of the customization of the CSS Code snippet. If so, youll be able to see all the basic customizations are already highlighted in above CSS Code snippet. And If youre a WordPress Blogger, able to follow the same method given below in your own manner. Ive not used WordPress yet, so Im not able to give much explanation about adding this widget in WordPress Blog.

   Creating Show & Hide Effect with Hover Button via CSS

Due to Bloggers tweak in Blogger template HTML editor, become more advanced for developers. So if youre a novice Blogger, itll be a little bit complicated, because youve to deal with not only CSS and HTML but with jQuery too. In advance, backup your template before you dive into template HTML editor.

Also make sure to steer clear untrue click on invalid clicks on Format template, Revert changes and Revert widget templates to default buttons, if youre using high customized Blogger template.

  • Go to Blogger Dashboard » Template
  • Backup your Blogger Template before making any changes
  • Click on Edit HTML
  • Expand your Blogger template skin | See how it's - screenshot
  • Press Ctrl + F and search the code shown below

]]></b:skin>

Now copy & paste the below code right above/before ]]></b:skin> [use Ctrl+F to find the code].

/* CSS Show More & Hide Content by LabStrike */
html {
    background: white;
}
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
figure {
    margin: 0 0 1.3rem 0;
    -webkit-transition: .125s linear;
    -moz-transition: .125s linear;
    -ms-transition: .125s linear;
    -o-transition: .125s linear;
    transition: .125s linear;
}
figure img {
    max-width: 100%;
    height: auto;
}
body {
    max-width: 480px;
    width: 90%;
    margin: 3em auto;
    font-size: 92%;
    line-height: 1.3rem;
    font-family: Georgia;
    position: relative;
    *zoom: 1;
}
body:before, body:after {
    content: "";
    display: table;
}
body:after {
    clear: both;
}
p {
    margin-bottom: 1.3rem;
}
article {
    margin-bottom: 3rem;
    position: relative;
    *zoom: 1;
}
article:before, article:after {
    content: "";
    display: table;
}
article:after {
    clear: both;
}
article figure {
    float: left;
    width: 32.5%;
}
article section:first-of-type {
    float: right;
    width: 62.5%;
}
article section:last-of-type {
    display: none;
    visibility: hidden;
}
section {
    -webkit-transition: .125s linear;
    -moz-transition: .125s linear;
    -ms-transition: .125s linear;
    -o-transition: .125s linear;
    transition: .125s linear;
}
input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}
[for="read_more"] {
    position: absolute;
    bottom: -3rem;
    left: 0;
    width: 100%;
    text-align: center;
    padding: .65rem;
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}
[for="read_more"]:hover {
    background: rgba(0,0,0,.5);
    color: rgb(255,255,255);
}
[for="read_more"] span:last-of-type {
    display: none;
    visibility: hidden;
}
input[type=checkbox]:checked ~ section {
    display: block;
    visibility: visible;
    width: 100%;
}
input[type=checkbox]:checked ~ figure {
    width: 100%;
}
input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {
    display: none;
    visibility: hidden;
}
input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {
    display: block;
    visibility: visible;
}

Customizations: You dont have to change anything in the above CSS Code. But things you can customize are max-width (line no: 26), font-size (line no: 29) and font-family (line no: 31). Moreover, if you wanna change the hover color of the Show More button, slightly replace rgba(0,0,0,.5) (line no: 96) with a HTML Color Code or RBGA Color Code. Also you can change the button text color by changing the RGB Color code from line no: 97. If you prefer more customizations, never be indecisive to mention your precious needs via comment.

Preview your Blogger template and unless any error occurred, click on Save template and youre successfully added the skin to this widget. Use the following HTML Code snippet to add this widget to your blog or blog post (in Edit HTML section). Swap your blog post from Compose to EDIT HTML to add this widget.

/* HTML Show More & Hide Content by LabStrike */
<h2 style="background-color: white; font-family: 
'OFL Sorts Mill Goudy TT', Georgia, Times, serif; font-size: 1.6em; 
font-weight: normal; line-height: 2.5em; margin: 20px 0px 0.4em; padding: 0px;">
Parahraph Title</h2>

<article>
  <input type="checkbox" id="read_more" role="button">
  <label for="read_more" onclick="">
  <span>Show More</span><span>Hide Content</span>
</label>     

<figure>
   <img src="Your Image URL" alt="Image ALT Tag" />
</figure>

<section>
   <p>First Paragraph Intro</p>
</section>

<section>
   <p>Second Paragraph</p>
   <p>Third Paragraph</p>
</section></article>

 Please note the following things
  - Remove Paragraph Title if you dont wanna display title on this widget.
  - Replace Show More & Hide Content texts with any other one you prefer.
  - Replace Your Image URL & Image ALT Tag with the original image link URL.
  - Replace First Paragraph with your paragraph info introduction.
  - Replace Second & Third Paragraphs with your main body texts.

Remember: If you wanna add more paragraphs within this widget, simply add your info between Paragraph Tags [<p>Your Paragraph</p>]. But all paragraphs should be within Section Tags [<section><p>Your Paragraph</p></section>]. And both Paragraph & Section Tags should be within Article Tag [<article><section><p>Your Paragraph</p></section></article>]. Also you can display CSS, HTML, or JavaScript Code snippets by phrasing them via htmlentities.net.

Also see: Animated CSS Button with Double Sliding Drawer Effect

Hope you enjoy this tutorial. Now its your time to hire us with your feedback and suggestions. Leave a comment below and lets see if you appreciated the tutorial! Never hesitate to contact me if youre facing any trouble while dealing with CSS or HTML Code snippets. Kindly respect the efforts and wishing you a happy blogging!