?
Solved

How to create simple accordion in wordpres

Posted on 2016-09-30
4
Medium Priority
?
85 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 400 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 58

Accepted Solution

by:
Julian Hansen earned 1600 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 58

Expert Comment

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

Featured Post

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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. …
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
Suggested Courses
Course of the Month9 days, 18 hours left to enroll

762 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