Simple jQuery Accordion (with CSS) That Google Can Index

jQuery, SEO, Tools 9/5/2022 Post a comment

Here’s a simple jQuery accordion you can use on your websites for free. I’ve included all jQuery, CSS & HTML needed to make this work right out the box.

This simple jQuery accordion has also been proven to be indexable by Google, making it great for an SEO that needs to get their word count up, but doesn’t want to hinder their conversion rate.

Simply copy and paste the code onto your website:

Accordion HTML

<div class="OTMaccordionElement">
	<div class="OTMaccordionTitle">Accordion Title</div>
	<div class="OTMaccordionContent">Accordion Content</div>
</div>

Accordion CSS

.OTMaccordionElement {
    border-bottom: 1px solid rgba(255,255,255,.5);
    font-size: 16px;
}
.OTMaccordionTitle {
    font-weight: bold;
    padding: 10px 36px 10px 0;
    position: relative;
    cursor:pointer;
}
.OTMaccordionTitle:after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 0;
    width: 36px;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-weight: bold;
    color: inherit;
    font-size: 20px;
}
.OTMaccordionTitle.contentOpen:after {
    content: "-";
}
.OTMaccordionContent {
    display: none;
    padding-bottom: 10px;
}

Accordion jQuery

<script>
jQuery(document).ready(function(){
	jQuery('.OTMaccordionTitle').click(function(){
		jQuery(this).siblings('.OTMaccordionContent').slideToggle();
		jQuery(this).toggleClass('contentOpen');
	});
});
</script>

Video Tutorial

Working Example

This is the accordion title

This is the accordion content that’s hidden inside (but completely indexable by Google)!

This is the second accordion title

This is the accordion content that’s hidden inside.

This is the third accordion title

This is the accordion content that’s hidden inside. I’m writing a bit of content in this one to help get my word count up for SEO. If you’re reading this make sure to write “I see your clever SEO trick with the accordion” in the comments below to let me know you’ve seen it and understand what I’m doing! This trick can be really helpful when tools like POP, Cora or Surfer say you need to add more content to your pages to rank in Google, but you don’t want to hinder the conversion rate. Anyway, that sound be about enough content.

Don’t Forget To Share!

If you found this jQuery and css accordion code useful, make sure to share it with others so they can too benefit from it!