jquery accordion with tabs

Being a newbie I have read forums and posts but still can't work out how to have tabs inside accordions. I'm using the following. No Ajaxed content.

jQuery UI Example Page

$(function() { $("#accordion").dialog({ open: function(){ $("#tabs").tabs(); } }); }); </script> <style type="text/css"> /*demo page css*/ body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} .demoHeaders { margin-top: 2em; } #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} ul#icons {margin: 0; padding: 0;} ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} ul#icons span.ui-icon {float: left; margin: 0 4px;} </style> </head> <body> <!-- Accordion --> <h2 class="demoHeaders">Accordion</h2> <div id="accordion"> <div> <h3><a href="#">First</a></h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> <div id="tabs"> <ul> <li><a href="#tabs-1">First</a></li> <li><a href="#tabs-2">Second</a></li> <li><a href="#tabs-3">Third</a></li> </ul> <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> </div> </div> <div> <h3><a href="#">Second</a></h3> <div>Phasellus mattis tincidunt nibh.</div> <div id="tabs"> <ul> <li><a href="#tabs-1">First</a></li> <li><a href="#tabs-2">Second</a></li> <li><a href="#tabs-3">Third</a></li> </ul> <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> </div> </div> <div> <h3><a href="#">Third</a></h3> <div>Nam dui erat, auctor a, dignissim quis.</div> <div id="tabs"> <ul> <li><a href="#tabs-1">First</a></li> <li><a href="#tabs-2">Second</a></li> <li><a href="#tabs-3">Third</a></li> </ul> <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> </div> </div> </div> </body>

-------------Problems Reply------------

You had a few errors preventing this from working, all fixed in a demo here.

  • IDs must be unique, your Tab IDs, e.g id="tabs" need to be class="tabs", also each set needs it's own IDs, for example the second should start with: <a href="#tabs-4"> and the corresponding <div id="tabs-4"> below and so on.
  • The accordion headers and <div> for content needs to be siblings, so the <h2> elements should be beside the content <div> elements for the accordion.
  • Change your jQuery to use .accordion() for accordion instead of .dialog() (this is a separate plugin).

Your jQuery should look like this in the end (notice .tabs using a class selector):

$("#accordion").accordion();
$(".tabs").tabs();​

Category:jquery Views:1 Time:2010-08-22
Tags: jquery

Related post

  • jQuery accordion - first tab open on visit 2011-10-24

    I recently uploaded my personal portfolio site online (www.edwardmanson.com) and have been attempting to find out ways to keep the first tab in the accordion section (About Me) open when anyone visits the site. $(document).ready(function() { $(".desc

  • jQuery : Accordion and tabs in 2 fixed columns 2012-02-06

    I have 2 columns in the first one an accordion, in the second some tabs. The problem I have is the section of the tab where the level is, is big, Take a look the picture. I join the code : http://dl.dropbox.com/u/14486902/jQuery.2FixedColumns.Tabs.Ac

  • jQuery Accordion and Tabs 2011-03-29

    I'm trying to get a jQueryUI accordion working inside jQueryUI tabs. I've read of people having problems and have found several posts which have reported success from initializing the accordion inside the tabs' 'show' event, but when I try this I jus

  • jquery accordion tab 2012-04-23

    I'm trying to have a jquery accordion tab to display different content to the top and to the bottom of the tab when clicked if you check the following website http://www.eset.com/us/#tab=fbus You should see 2 tabs one for business and the other for h

  • jQuery Accordion and loading content through AJAX 2009-03-14

    I would like to load the content under each jQuery accordion header using the jQuery load command. Currently, I have set this up as the following $(function() { $("#accordion").accordion({ header: "h2", active: false }); $("h2", "#accordion").click(f

  • How do I load content in JQuery Accordion via AJAX 2009-12-10

    I have a jquery accordion that loads a lot of data. This accordion is generated by querying a database. My question - is there a way to not load the content until a specific element of the accordion has been clicked? Basically, I'd like to replicate

  • How do I remove an active outline from jquery accordion? 2010-01-18

    I am using Jquery Accordion. The active link has an outline. I have tried using css: #accordion a:focus { outline: none; } #accordion a:active {outline: none; font-weight:bold;} and also #accordion a:-moz-any-link:focus { outline: none; } None of the

  • Keep the current Jquery accordion pane open after asp.net postback? 2010-01-27

    I have a jquery accordion on an asp.net aspx weppage. Inside the panes, I have asp.net buttons. When I click on the button, the pane I was in, closes and reloads the page, defaulting to the first pane. I don't mind the reload, but is there a way to k

  • jQuery Accordion - open specific section on pageload 2010-02-04

    I have a rather basic implementation of a jQuery Accordion on a page (using 1.3.2, jQuery UI Core 1.72 and jQuery UI Accordion 1.7.2), and I wish to open the 2nd section when the page loads. i've tried numerous methods but nothing seems to work... HE

  • jQuery Accordion - Need index of currently selected content part 2010-02-10

    I have a simple menu on a web page, based on the jQuery Accordion. I have simplified the code somewhat, and it looks like this; <div id="menu_div" class="nt-tab-outer nt-width-150px"> <h3 class="nt-tab-title"><a href="#">Menu A</

  • How do I get jscrollpane to co-exist with a jquery accordion script? 2010-11-18

    I have a site that uses a accordion script, and I want to place a scrollbox inside one of the accordion tabs. However, the scrollbox works just fine, but breaks the accordion script. Is there a way around this conflict? This is the site with just the

  • JQuery Accordion is shaky in SharePoint 2007 2010-12-29

    I have a small prototype of a JQuery Accordion that I would like to use in SharePoint 2007. I can run it locally and it performs fine. When I put the code into a content editor web part in SharePoint 2007, the accordion works, but is shaky at the end

  • A jQuery accordion that cycles automatically and other options 2011-03-13

    Does anyone have a demo of a jQuery accordion that cycles through content automatically with an option to set the number of loops or cycles? --------------Solutions------------- StackOverflow has several questions on this topic. One such question can

  • How to change jquery accordion header background colors? 2011-04-27

    Experts, how to change the accordion menu header colors ? which style class name is this ? and how to set default selected tab ? Please see the URL: http://jqueryui.com/demos/accordion/ Here i need to select section 2 when i am opening menu... Please

  • Problem with a long jQuery accordion 2011-07-22

    I am running in to a strange problem with a long jQuery accordion. Towards the top of the page, everything works great. As soon as the page needs to scroll things start acting goofy. The accordion tabs near the bottom of the page open just fine, but

  • Dynamically creating a jQuery Accordion 2011-08-14

    I'm having trouble creating a jQuery Accordion using javascript. It creates the Accodion labels just fine, and shows the text of the first element too. It does not show the second elements text, and when you click on it, you lose the first oned text

  • jquery accordion sections does not open 2011-08-30

    I've got a jquery accordion on site BUT it kinda doesn't work >> when browser loads page accordion looks good (with one first section opened) BUT when I press on some other section, first section closes and none of sections ar opening up, so it

  • Jquery accordion with repeater, row details are not visible when activating row 2011-09-06

    I am trying to use the jquery accordion with a repeater. I used the sample directly from the jquery documentation. When I click on the section links, the details open and expand, but you can't see any of the text. The html output looks right to me, n

  • Jquery Accordion to activate specific panels with anchor tags/url hash 2011-11-10

    I am having an almost identical problem to the question asked here ( Link to open jQuery Accordion? ) but wasn't able to correctly implement the answers. I tried this solution but it didn't work for me: $("#accordion").accordion("activate", <?php

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.085 (s). 11 q(s)