tabs within tabs in HTML/CSS and javascript?

I want to create a tabbed view in HTML. My problem is that one of the tab have tabs within it. My problem is I don’t know how to ensure that the sub-tabs do not show unless I am in profile tab. What is the best way to accomplish this? How can I use javascript to update class accordingly and not show the tabs? Any help would be grateful. My code is

            <div class="tabheader">
            <ul>
                <li><a href="#addprop_tab" title="">Add Property</a></li>
                <li><a href="#savedprop_tab" title="">Saved Property</a></li>
                <li><a href="#inbox_tab" title="">Inbox</a></li>
                <li><a href="#profile_tab" title="">Update Profile</a></li>
            </ul>
        </div> <!-- End of tabheader -->
        <div class="tabcontent">
            <div id="addprop_tab">
                <p><a href="#" title="Click to add property">Add your property to NPLH</a></p>
                show added property
            </div> <!-- End of addprop_tab -->
            <div id="savedprop_tab">
                <p>Browse your saved properties</p>
            </div> <!-- End of savedprop_tab -->
            <div id="inbox_tab">
                <p>inbox</p>
            </div> <!-- End of inbox_tab -->
            <div id="profile_tab">
                <ul>
                    <a href="#tab1" title="">Tab1</a>
                    <a href="#tab2" title="">Tab2</a>
                    <a href="#tab3" title="">Tab3</a>
                </ul>
            </div> <!-- End of profile_tab -->
        </div> <!-- End of tabcontent -->
        <div class="subtab_content">
            <div id="tab1">
                <p>tab1</p>
            </div> <!-- End of tab1 -->     
            <div id="tab2">
                <p>tab2</p>
            </div> <!-- End of tab2 --> 
            <div id="tab3">
                <p>tab3</p>
            </div> <!-- End of tab3 --> 
        </div>

and CSS code is

  • Jquery Cycle plug-in is not working as I expected
  • controlling the width for a select box
  • Safari - Jumpy animation in Safari using jQuery Animate - Fine in FF & Chrome
  • Inline CSS/Javascript into a HTML file
  • Distribute CSS with a React component
  • jQuery function prevents add / remove class on click
  • .tabheader {
        width: 1000px;
        position: relative;
        top: -100px;
    }
    
    .tabheader ul { 
        list-style-type: none;
    }
    
    .tabheader ul li {
        float: left;
        width: 175px;
        font-size: 15px;
        text-align: center;
        padding: 10px 25px 10px 25px;
        margin: 0px 11px 5px 11px;
        border: 1px solid #aaa;
    }
    
    .tabcontent {
        clear: both;
        position: relative;
        top: -100px;
        height: 40px;
        overflow: hidden;
        background: #eee;
    }
    
    .tabcontent div {
        height: 40px;
        padding: 10px;
    }
    
    .subtab_content {
        clear: both;
        position: relative;
        top: -100px;
        height: 200px;
        overflow: hidden;
        background: #eee;
    }
    
    
    
    .subtab_content div {
        height: 200px;
        padding: 10px;
    }
    

  • html css toggle show/hide a div box when click like in facebook navigation?
  • Flexbox causes adsense error: “adsbygoogle.push() error: No slot size for availableWidth=0”
  • Why is my z-index not working?
  • Regex parsing of CSS @media queries (and other nested selectors)
  • Prevent appcache cache current page
  • Hide content inside iframe?
  • 2 Solutions collect form web for “tabs within tabs in HTML/CSS and javascript?”

    I am answering my own question here … this is few hours of work but I do not really know any other variables in javascript. Is this the best way to do this.

    Your comments will be highly appreciated.

    JS

    <script type="text/javascript">
        function activateTab(mainid, li_id, divid, tabid) {
            var mainDiv = document.getElementById(mainid);
            var li = document.getElementById(li_id);
            var tabDiv = document.getElementById(divid);
            var mainTab = document.getElementById(tabid);
    
            for (var i = 0; i < mainDiv.childNodes.length; i++) {
                var node = mainDiv.childNodes[i];
                if (node.nodeType == 1) {
                    node.style.background = (node == li) ? '#aaa' : 'white';
                }
            }
            for (var i = 0; i < tabDiv.childNodes.length; i++) {
                var node = tabDiv.childNodes[i];
                if (node.nodeType == 1) {
                    node.style.display = (node == mainTab) ? 'block' : 'none';
                }
            }
        }   
    

    HTML

        <div id="tabheader">
            <ul id="tablist">
                <li id="addprop" style="background: #aaa"><a href="javascript:activateTab('tablist','addprop','tabcontent','addprop_tab')" title="">Add Property</a></li>
                <li id="savedprop"><a href="javascript:activateTab('tablist','savedprop','tabcontent','savedprop_tab')" title="">Saved Property</a></li>
                <li id="inbox"><a href="javascript:activateTab('tablist','inbox','tabcontent','inbox_tab')" title="">Inbox</a></li>
                <li id="profile"><a href="javascript:activateTab('tablist','profile','tabcontent','profile_tab')" title="">Update Profile</a></li>
            </ul>
        </div> <!-- End of tabheader -->
        <div id="tabcontent" class="maintab">
            <div id="addprop_tab" style="display: block">
                <p><a href="#" title="Click to add property">Add your property to NPLH</a></p>
            </div> <!-- End of addprop_tab -->
            <div id="savedprop_tab" style="display: none">
                <p>Browse your saved properties</p>
            </div> <!-- End of savedprop_tab -->
            <div id="inbox_tab" style="display: none">
                <p>inbox</p>
            </div> <!-- End of inbox_tab -->
            <div id="profile_tab" style="display: none">
                <p>
                    <ul>
                        <a href="javascript:activateTab('tablist','profile','profile_subtab','tab1')" title="">Tab1</a>
                        <a href="javascript:activateTab('tablist','profile','profile_subtab','tab2')" title="">Tab2</a>
                        <a href="javascript:activateTab('tablist','profile','profile_subtab','tab3')" title="">Tab3</a>
                    </ul>
                </p>
                <div id="profile_subtab" class="subtab">
                    <div id="tab1" style="display: block">
                        <p>tab1</p>
                    </div> <!-- End of tab1 -->
                    <div id="tab2" style="display: none">
                        <p>tab2</p>
                    </div> <!-- End of tab2 -->
                    <div id="tab3" style="display: none">
                        <p>tab3</p>
                    </div> <!-- End of tab3 -->
                </div>
            </div> <!-- End of profile_tab -->
        </div> <!-- End of tabcontent -->
    

    Ok forget the previous answer. jQuery tabs or similar solution is the way to go. I was really new to web development when I asked the question