Did you ever needed to own sections within your post body that is facultative for the browser to read or see ?

In some cases you would possibly feel want for a district of your article to be hidden and solely visible once the readers desires it to be. however in basic choice we tend to get in Blogger or the other WYSIWG editor this is often insufferable. But wait, it does not imply it cannot be done.

 There's nothing special, it simply a hide or show box within that, you'll place content of your selection. it isn't one thing that everybody would possibly want for his or her diary posts however after you want it is not simple to search out easy-to-follow instruction on the web therefore i made a decision to form such a box and place up its directions for blogger.

 

Let's begin


This tutorial needs you to figure with codes, here work suggests that simply copying-pasting and written material some components of the code. therefore it'll be easier for you to figure if you open an understandable text editor like pad of paper.
Including the jQuery Library
This step is elective, you may not got to perform this step if your example already incorporates a jQuery library enclosed. If you're employing a bespoke example, as your web development. if they've already supplementary it. If not you'll continue with the steps:

1. move to your Blogger Dashboard>>Template>>Edit HTML(markup language)
2. once within the code box press CTRL+F to open a search box
3. explore for  </head> within the example
4. Once you discover it within the example, paste the subsequent code forthwith higher than  </head>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


That is however you add jQuery to your diary.
Always keep in mind to feature the jQuery script code higher than any script (including the one i'm about to offer for this widget) within the example depends on jQuery.

 JavaScript or jQuery Code


The first factor you'll add within the example to create our expandable section work is that the code that handles it concealment and showing. it is a little jQuery dependent JavaScript code. Following is that the code you wish :

<script type='text/javascript'>
$(document).ready(function(){
$(".sh-section-between").on("click",function(){
$(this).parent().children(".h-section-continue").slideToggle(202);
});
});
<script>


The code higher than merely tells the browser to indicate hidden content if the "show" button is clicked, and if the content box is already visible it merely hides.
 
To apply this code move to the Blogger Dashboard>>Template>>Edit HTML>>Use CTRL+F to seek out </body> and paste the JavaScript code straightaway above or before it and save.
 

Adding the CSS


The event handling half is completed. currently let's vogue our expendable box so it's sensible and also the reader notices it.  Here's the CSS that designs the whole box.

 
/* Expandable Box CSS */
.hidden-section-container {
  background-color:rgba(186, 186, 186, 0.91);
  box-shadow:0 2px 10px rgba(1,1,1,0.4);
}
.sh-section-between {
  font-size:18px;
  color:#fff;
  text-shadow:1px 1px 0px rgba(2,2,2,0.4);
  padding:5px 10px;
  cursor:pointer;
}
.h-section-continue {
 padding:10px 10px;
 background-color:#eee;
 display:none;
}


HTML for the box


After we have the 2 main things for this box we are able to currently truly use it in our web log posts. mistreatment it's easy. The HTML for box might contain your text or the other content you wish within it. however before we tend to add the content let's examine what is the basic HTML for this box.


<div class='hidden-section-container'>
  <div class='sh-section-between'><span>Your Choice of title</span></div>
  <div class='h-section-continue shw-box'>
    <!-- All your text/html below this -->
     
     <p>All your content here</p>
     
    <!-- All your text/html above this -->
  </div>
</div>



You don't have to be compelled to build a lot of changes to the present. All you would like to alter is that the title and also the content. let's examine however you'll have it away :
 
  • Title Text - this can be the text that may seem because the title of that expandable box. See the second line of the code. amendment the text "Your Choice of title" to something you wish because the title.
     
  • Content - when the road four you'll add something attainable with HTML within the hidden box. Add text, images, links etc. mistreatment its HTML markup.

Once your HTML for the expandable box is prepared you're equipped to place it in your post body. however you cannot merely paste HTML code in your post editor. so as to stop the HTML from being shown even as plain text you'll initial have to be compelled to switch to the HTML mode within the post editor.

Open your Post Editor, currently choose the HTML tab next to the 'Compose' tab to modify to HTML mode. currently you'll paste your code anyplace you wish the box to seem.