WordPress and Accordions, nothing works now

2 Views

I am quite stumped. I am not sure what I could have done to break the accordion function in either the Accordion Shortcode plugin nor the CSS Accordion code I just tried. Mostly I need to understand how to troubleshoot these so I am throwing my self at your mercy so I can help get this site back to proper functionality.

First, the page with the Accordion Shortcode: http://londoncapital.biz/partners/global/

Read More

I was using Symple Shortcode plugin till I had to reinstall the site then that plugin stopped working. I suspect this was related to the WP3.7.1 upgrade but I cannot be sure. So I decided to just find another plugin that did work and the Accordion Plugin worked and looked better for the site so I was happy. At some point, while going through and fixing some of the oddball issues that popped up after the reinstall (weird spaces that somehow were being generated from the restored backup) and the Better WP Security plugin being overzealous in its protection, I was happy with the Accordion Shortcode plugin. Then…it stopped working. Because I could not track down what I had possibly done I decided to look into an alternative accordion and found a CSS version. Thought that was perfect and would get away from any plugin incompatibility but alas this too has failed. It currently collapsed and it will not expand.

CSS Accordion page: londoncapital. biz /test-home

I followed this site: http://www.hongkiat.com/blog/css-content-accordion/ and referenced the CSS file like so: 

@import url("../onyx/accordion.css");

I suspect there is a simple answer but damned if I can figure it out. Thank you for any efforts in advance!
This file is sitting in the same directory as the normal style.css (style4.css for this template to be exact).

Post Views: 2

Related posts

Leave a Reply

2 comments

  2. Following on from my comment above: you’ve solved one problem by adding the IDs, but there’s now another problem. You’ve swapped the sections in the HTML for div, but you haven’t changed the CSS to match. Change all the instances of .accordion section to .accordion div like so:

    .accordion section:target { ... }
.accordion section:target:hover { ... }
.accordion section:target h2 { ... }
.accordion section:target h2 a { ...}

    to
    .accordion div:target { … }
    .accordion div:target:hover { … }
    .accordion div:target h2 { … }
    .accordion div:target h2 a { …}

    You’ll also need to do the same for .horizontal section and .vertical section. See this JSFiddle to see it in action