accordion

I'm trying to create a navigation menu that contains multiple level of organization. I'm building a nested jQuery UI Accordion that works great if all my content in the lowest level (deepest) nest of the accordion. The problem is that some elements will have content and a sub accordion. If I place some text in side the top accordion it looks great...but as soon as I wrap it in tags it breaks the nested accordion in that element Here is a mockup of what I'm trying to get it to look like Photo Mockup My current HTML <div id="faqs-container" class="accordian"> <h3><a href="#">One</a></h3> <div

using jquery v1.3.2 and jQuery UI 1.7.1 I have 1 tab control with 3 tabs in it. Each tab contains 1 accordion control. $(document).ready(function() { $('#acc1').accordion({ collapsible: true, autoHeight: false }); $('#acc1').accordion({ collapsible: true, autoHeight: false }); $('#acc1').accordion({ collapsible: true, autoHeight: false }); $('#tabControl').tabs(); }); tabControl is not visible at page load. There is button that opens it. $("#btnShow").bind("click", function() { $('#tabControl').slideToggle("slow"); }); I can't find the way to have all accordion controls collapsed. Every time I

In AngularJS UI Bootstrap I want to activate isopen when panel-heading is clicked, but I couldn't find a way. In this version is activated only if you click the link. Here's what I tried; <accordion-group is-open="isopen"> <accordion-heading ng-click="isopen=!isopen"> I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i> </accordion-heading> This is just some content to illustrate fancy headings. </accordion-group> ng-click="isopen=!isopen " This is the link I tried on Plunker AngularJS UI Bootstrap Thanks

In my UI I have an accordion setup like this: <div id="object_list"> <h3>Section 1</h3> <div>...content...</div> // More sections </div> The accordion works properly when it is first formed, and it seems to adjust itself well for the content inside each of the sections. However, if I then add more content into the accordion after the .accordion() call (via ajax), the inner for the section ends up overflowing. Since the accordion is being formed with almost no content, all the inner divs are extremely small, and thus the content overflows and you get accordions with scrollbars inside with

I have this line of code: $('#sitesAccordion .groupOfSites').click(function() { var lastOpenSite = $(this).siblings().hasClass(':not(.closedTab)'); console.log(lastOpenSite); }); I get "false" instead of getting one of the other elements (assuming that there is one - and there must be). I guess the problem is with: .hasClass(':not(.closedTab)'); What is the problem? My purpose is to create my own accordion (without using jQuery UI) and I am trying to write it like this: $('#sitesAccordion .groupOfSites').click(function() { //Get the last opened tab var lastOpenSite = $(this).siblings()

on the webpage oshadi-yoga.ch i like to get an navigation menu with a list like this: <ul> <li class="section-title">Yoga <ul style="display: none;"> <li><a href="/">Approach</a></li> <li><a href="/">Asanas</a></li> <li><a href="/">Yoga</a></li> <li><a href="/">Kirtan</a></li> </ul> </li> </ul> i wrote some jquery to get an accordion effect. if you click the first level the second list shall open with an toggle effect: $(function() { $("#lbar li.section-title ul").hide(); $("#lbar li.section-title").click(function() { $(this).find("ul").toggle(); }); }); $(function() { $("#lbar li.section