Nested Accordions within tabs

Question

New to this forum so please be gentle! I have been having issues with jQuery Accordions which are inside a set of tabs. The tabs work fine and so does the Accordion, but... what I really would like is to be able to use a link from within part of the Accordion to go to another part of the Accordion. The Accordion will be used as an instruction manual so therefore in certain sections there will be a bit that basically says to the user to "see this section".

I have checked on here at certain answers such as: jquery ui accordions within tabs and http://jsfiddle.net/9nKZp/1/show/#1| and have checked all over the internet searching for Accordions with anchors as well as Nested Accordions in tabs but I have YET to come across this being done!! Can't really believe that no one has done this!

Here is the code I have so far:

<!-- tabs -->
<link rel="stylesheet" href="/resources/css/tabs.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/resources/js/tabs.js"></script>
<!-- ENDS tabs -->
<!-- accordion -->
<link rel="stylesheet" href="/resources/css/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- ENDS accordion -->

<script>
    $(function () {
        $(".accordion").accordion({
            collapsible: true,
            heightStyle: "content",
            active: false,
        
        });
    });
</script>

<!-- TABS START -->
<div class="tabs_wrapper">
    <!-- 1st new tab design START -->
    <div id="new_tabs">
        <ul>
            <li class="active"><a href="#tab1" rel="tab1">Tab1</a></li>
            <li><a href="#tab2" rel="tab2">Tab2</a></li>
            <li><a href="#tab3" rel="tab3">Tab3</a></li>

        </ul>
    </div>
    <div id="new_tabs_content">
        <div id="tab1" class="tab_content" style="display: block;">

            <p>
                Data on first tab
            </p>


        </div>
        <div id="tab2" class="tab_content">
            <h1>Tab2</h1>

            <div class="accordion">

                <h3><a id="#1">1</a></h3>
                <div>
                    Content of 1
                    <div class="accordion">
                        <h3><a id="#1.1">1.1</a></h3>
                        <div>
                            Content of 1.1
                            <div class="accordion">
                                <h3><a id="#1.1.1">1.1.1</a></h3>
                                <div>
                                    Content of 1.1.1, please see <a href="#2.1.2">2.1.2</a>
                                </div>
                                <h3><a id="#1.1.2">1.1.2</a></h3>
                                <div>
                                    Content of 1.1.2
                                </div>
                                <h3><a id="#1.1.3">1.1.3</a></h3>
                                <div>
                                    Content of 1.1.3
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <h3><a id="#2">2</a></h3>
                <div>
                    Content of 2
                    <div class="accordion">
                        <h3><a id="#2.1.1">2.1.1</a></h3>
                        <div>
                            Content of 2.1.1
                        </div>
                        <h3><a id="#2.1.2">2.1.2</a></h3>
                        <div>
                            Content of 2.1.2
                        </div>
                        <h3><a id="#2.1.3">2.1.3</a></h3>
                        <div>
                            Content of 2.1.3
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div id="tab3" class="tab_content">
            <h1>Tab3</h1>
            <p>another load of data</p>
        </div>

    </div>
    <!-- 1st new tab design END -->
</div>
<!-- TABS END -->

Please let me know if you require any further code that I am using such as the tabs.js etc.

Please help me! Is this at all possible?!

Many thanks and big hugs if you can help!!:-)

Answer 1

Here is the idea of how to get this one to work.

In the example http://jsfiddle.net/9nKZp/1/show/#1|1 it seems like the tabs linking works, but it only works when you load the page in a new tab, not from link.

You need your own jsfiddle (you already have one v.1), where you should place some example content WITH links from one tab/question to another pair tab/question (or there may have links to the same tab, but another question)! You also should implement the code from the semi-working example to your code.

Then the logic is as follows (examples using jQuery):

(1) Create on click event for each link you place inside the tabs, something like that:

$('#all_tabs_container a').click( function(){
    checkInternalLinks();
});

In the function checkInternalLinks()...:

(2) You should check if the link is internal (#...) and if it is in a know format (like: #x|x or #x|x|x or both)

(3) When you validate this link you'll need to make the specific functionality to switch tabs and accordeons.

(4) The needed functionality already exists(!), but on page load, so you'll need to take some time on it and realize what is hapenning, so you can copy the same code to the onclick event function.

If you like the idea, you can start! Even if you can't complete it, I'm sure someone else will help :-)