How To Create an Accordion Drop Down Section in WordPress

Here at DearBlogger, whenever we setup something we find cool or interesting on the blog, we usually can’t wait to teach you how too.

So when we recently setup the light blue accordion drop down bar below the header, I couldn’t wait to explain how you can make a drop down menu like this too!

It’s great to hold your guides, secret content, and generally just make your blog or website more interactive.

And it’s quite easy to create a WordPress according – even without a plugin that could break!

Here’s how it’s all done 🙂

Step 1: Create the structure in a blog post

We used the Text tab of any empty blog post to create this accordion. This way you can’t make mistakes, and you can preview it too which is really nice!

So first, you’ll want to write out the basic accordion structure. Here’s the HTML from ours, it’s very basic so you can just copy paste it if you’d like and replace the DearBlogger content.

<button class="accordion">Start Your Blog The DearBlogger Way »</button>
<div class="panel">
  <div class="topbaricons">
	  <div class="topicon">
		  <a href="https://dearblogger.org/blogger-or-wordpress-better"><img src="https://dearblogger.org/wp-content/uploads/2018/05/white-list-150x150.png" alt="" width="50" height="50" class="alignleft size-thumbnail wp-image-27149" /></a>
<a href="https://dearblogger.org/blogger-or-wordpress-better">Check Out The<br/>Best Blog Platforms</a>
	  </div> 
	  <div class="topicon">
		  <a href="https://dearblogger.org/wordpress-blog-with-hostgator-hosting"><img src="https://dearblogger.org/wp-content/uploads/2018/05/white-wordpress-150x150.png" alt="" width="50" height="50" class="alignleft size-thumbnail wp-image-27150" /></a>
		  <a href="https://dearblogger.org/wordpress-blog-with-hostgator-hosting">How To<br/>Setup WordPress</a>
	  </div>
	  <div class="topicon">
		  <a href="https://dearblogger.org/stay-connected"><img src="https://dearblogger.org/wp-content/uploads/2018/05/white-ebook-150x150.png" alt="" width="50" height="50" class="alignleft size-thumbnail wp-image-27148" /></a>
<a href="https://dearblogger.org/stay-connected">How To</br/>Launch Successfully</a>
	  </div>
	  <div class="clearfix"></div>
	</div>
</div>

Step 2: Insert this CSS into your custom CSS window

For a custom CSS window, we use Theme Junkie CSS plugin. Here’s what I’ve written.

/* Sets width of entire accordion */
.topbaricons {
  max-width: 75%;
  margin: 0 auto;
  padding: 20px 0;
}

/* Sets width individual icon sections and floats them left */
.topicon {
  float: left;
  width: 33%;
}

/* Color of links inside the accordion */
.topicon a {
  color: #fff;
}

/* Entire style of the outer accordion */
.accordion {
    background-color: #E3F7FA;
    cursor: pointer;
    color: #000;
    font-family: Arial Rounded MT Bold;
    padding: 18px;
    border: 2px dashed #ccc;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

/* Keeps the accordion's color when in action */
button.accordion:hover {
    background-color: #E3F7FA;
}

/* Last but not least, sets the panel up which drops down */
.panel {
    padding: 0 18px;
    background-color: #791420;
    font-family: Arial Rounded MT Bold;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

Step 3: Insert the Javascript

We use Insert Headers and Footers plugin and put this in the footer section. No need to change anything here.

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

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

Were you able to make an accordion drop down in WordPress?

If so, let us know how you’re looks! There’s obviously plenty of style changes you can make to color, fonts, icons and more in the above templates! If your accordion drop down in WordPress didn’t work, what questions or roadblocks came up? Thank so much for reading another beginner friendly HTML & CSS tutorial at the blog!