Solved

How to create simple accordion in wordpres

Posted on 2016-09-30
4
58 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
  • 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 54

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 54

Expert Comment

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

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

808 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