Solved

How to create simple accordion in wordpres

Posted on 2016-09-30
4
71 Views
Last Modified: 2016-10-03
Hi

I need to create a very simple accordion in wordpres my first thought was a plugin or use jquery ui accodian

The  problem is Wordpress is installed on intranet with no immediate possibility of upgrading from version 3.1  
most plugins including accordion-shortcodes are not compatible with  Wordpress older than 3.3

So DIY option of using jquery ui accordian
Wordpress 3.1 uses jquery 1.4.4  

Any suggestions where to obtain a compatible version of   jquery ui accordian that will work with jquery 1.4.4  and Wordpress 3.1?

Is there a better way to do this?
0
Comment
Question by:trevor1940
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 31

Assisted Solution

by:Marco Gasi
Marco Gasi earned 100 total points
ID: 41824721
Hi. I don't know if you can use it, but here is how to build a very simple accordion without any plugin: https://www.experts-exchange.com/articles/21219/The-simplest-jQuery-Accordion-ever.html. Maybe you can put it in your wp pages
0
 
LVL 56

Accepted Solution

by:
Julian Hansen earned 400 total points
ID: 41824723
Accordion's can be quite simple
Here is a sample
HTML
    <div class="accordion">
      <div class="accordion-item">
        <h2>Item 1</h2>
        <div class="accordion-content">
          <p> This is the content</p>
        </div>
      </div>
      <div class="accordion-item">
        <h2>Item 2</h2>
        <div class="accordion-content">
          <p> This is the content</p>
        </div>
      </div>
      <div class="accordion-item">
        <h2>Item 3</h2>
        <div class="accordion-content">
          <p> This is the content</p>
        </div>
      </div>
    </div>

Open in new window

CSS
<style type="text/css">
.accordion-content {
  display: none;
  overflow: hidden;
}
.accordion-item h2 {
  background: #5bc0de;
  color: white;
  border-color: #46b8da;
  font-size: 14px;
  padding: 5px;
  margin: 5px 0;
}
.accordion-item h2:hover {
  cursor: pointer;
}
</style>

Open in new window

jQuery
$(function() {
  $('.accordion-item h2').click(function() {
    $(this).next().slideToggle();
  });
});

Open in new window

Working sample here
0
 
LVL 1

Author Closing Comment

by:trevor1940
ID: 41826667
Thanx for your help Julian answer worked in Wordpress
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41826676
You are welcome.
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question