Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS + Jquery Vertical tabs

    Im trying to create verticle tabs to display different information, but my jquery is not functioning.

    1. I am trying to hide all the divs except the first one.
    2. Then when one of the tab lists is clicked the active class gets added to that and removed from the other.
    3. finally hide all the divs and show the one which was clicked.

    Check Jsfiddle http://jsfiddle.net/KHAN/HjYZ6/2/

    Code:
    $(document).ready(function() {
    	tabContent();
    })
    
    function tabContent() {
    	$('#tabsD div:not(:first)').hide();	
    	$('#tab-container li').click(function(event){
    		var id = $(event.target).index();
    		$('.active').removeClass('active');
    		$(event.target).addClass('active');
    		$('#tabsD div').hide().eq(id).show();
    	});
    }
    Last edited by KKHAN; 05-26-2013 at 03:06 PM.

  • #2
    New to the CF scene
    Join Date
    May 2013
    Posts
    8
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Hello KKHAN,

    I looked over our jsfiddle and played with it for a little bit and I believe I have found why the script isn't working properly for you.

    The issue I have found is your list items formatting. You are using ul->a->li and the proper format is ul->li->a

    So by changing:
    Code:
    <a><li tab="tab2" data-icon="&#xe009;">Tab2</li></a>
    To This:
    Code:
    <li tab="tab2" data-icon="&#xe009;"><a>Tab2</a></li>
    Should fix the problem as it did in jsfiddle.

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Any ideas why when transferring this back into my php document. The content divs do not work properly. the first div is displayed as normal but clicking the other tabs makes the content divs hide and not show and if i try to go back to the first tab even the content for that wont show.

    Here as soon as i add just the html of my header/menu it stops working

    Fixed
    Last edited by KKHAN; 05-26-2013 at 07:36 PM.

  • #4
    New to the CF scene
    Join Date
    May 2013
    Posts
    8
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I'm glad you got it working my friend


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •