Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to create simple accordion in wordpres

Posted on 2016-09-30
4
Medium Priority
?
88 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 59

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 59

Expert Comment

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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

618 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