How do you make tabs open and close independently?

[joann7]

How do you make tabs open and close independently?

Right now I have three tabs and one of them is always open. I would like for them to be able to all be closed to save space.

Here is a link to the page I am asking about http://joannfitzpatrick.com/rlv/quickvalidate-premium-0720.html

I know it is possible because I have seen it on other sites.

Thank you for your help.
JoAnn

[Paulie_D]

What JS are you using…there’s usually a switch or link to a class in there somewhere?

[joann7]

According to the documentation the page is using http://jqueryui.com/tabs/#collapsible .

I see that there is a script that should be added:

But I have tried adding it at the bottom of the head section, right after the tabs div, and below the rest of the scripts at the bottom of the page. None of this has worked.

Where do I add this code?

[Paulie_D]

Check the API documentation.

http://api.jqueryui.com/tabs/#option-active

[joann7]

Unfortunately, for me reading the documentation does not help. I do not know java script and the person that was working on this project that does is MIA. I have already tried to solve unsuccessfully. That is why I posted here. I don’t think this is complicated for someone that knows what they are doing. I was hoping some kind person that knows java script would be able to say add this line of code here.

[PicnicTutorials]

You could modify an “accordian” script. Just the css. Could be done with pure css or JS and css. I have both in an accordian if you need.

[joann7]

Thank you. That would be fantastic.

[PicnicTutorials]

Here is the accordian JS/css one I used back in the day. has all the options. http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm.

And here is a pure css version I built. http://www.websitecodetutorials.com/code/css/simple-css3-accordion-demo.php.

You or someone should be able to adjust the css to match your project.

[Paulie_D]

http://codepen.io/Paulie-D/pen/dEHyo

[PicnicTutorials]

Do pens not work on iPhone? Cuz I just have a white box with no tabs

[Paulie_D]

No idea…works fine on my laptop

[Author]

Posts