Solved

How to create simple accordion in wordpres

Posted on 2016-09-30
4
81 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 57

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 57

Expert Comment

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

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The purpose of this video is to demonstrate how to Import and export files in WordPress. 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 : Click on Too…
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…

728 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