Install Simple Accordions in your BLOG - Just Testing

Without wasting anytime let's get straight to the Main Point. In-order to install Accordions in your Blog, you need to complete 3 processes which are given below. Follow them and be patient.

---

#	PROCESS # 1 (CSS)
1	Go into your Theme's EDIT HTML
2	Search ]]></b:skin>
3	Now Copy & Paste the below code before ]]></b:skin>

/* CSS Accordions Start */

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\FF0B';
  font-size: 30px;
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: transparent;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* CSS Accordation End */

---

#	PROCESS # 2 (JavaScript)
4	Now stay there and Search </body>
5	After finding it, Copy the below code & Paste it before </body>

    <script>
var acc = document.getElementsByClassName(&quot;accordion&quot;);
var i;

for (i = 0; i &lt; acc.length; i++) {
  acc[i].addEventListener(&quot;click&quot;, function() {
    this.classList.toggle(&quot;active&quot;);
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + &quot;px&quot;;
    } 
  });
}
</script>

Step #6: Just Save it & Exit from there.

---

#	PROCESS # 3 (HTML)
7	Now Visit: draft.blogger.com
8	Create a + NEW POST
9	Copy the below code & Paste it in the HTML view.

<div>
<h2>Accordion with symbols</h2>
<p><span style="font-family: inherit; font-size: x-large;">In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</span></p>
<button class="accordion"><span style="font-family: inherit; font-size: x-large;">Section 1</span></button>
<div class="panel">
  <p><span style="font-family: inherit; font-size: large;">
    
    "The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the English alphabet. Owing to its brevity and coherence, it has become widely known. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.
    
    </span></p>
</div>

  <button class="accordion"><span style="font-family: inherit; font-size: x-large;">Section 2</span></button>
<div class="panel">
  <p><span style="font-family: inherit; font-size: large;">
    
    "The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the English alphabet. Owing to its brevity and coherence, it has become widely known. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.
    
    </span></p>
</div>

  <button class="accordion"><span style="font-family: inherit; font-size: x-large;">Section 3</span></button>
<div class="panel">
  <p><span style="font-family: inherit; font-size: large;">
    
    "The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the English alphabet. Owing to its brevity and coherence, it has become widely known. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.
    
    </span></p>
</div>

Step #10: Publish the Post.

---

HOW TO CHECK THAT IT INSTALLED OR NOT?

1. View your Post after Publishing it.

SOURCE: https://bit.ly/2Tyo8z9

DEMO OF ACCORDIONS

"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the English alphabet. Owing to its brevity and coherence, it has become widely known. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.

"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the English alphabet. Owing to its brevity and coherence, it has become widely known. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.

"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the English alphabet. Owing to its brevity and coherence, it has become widely known. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.

Related Posts