Selected tab wont show contet inside it

Question

I have a menu bar on the top left for selecting list, and the navigation which display what was selected from menu bar. Selected item from menu bar must be active on the menu bar and navigation bar which is working fine. The only problem is the contents inside the selected item is not displayed. I m using jquery and bootstrap to achieve this.

What I get

What I want to achieve

My code is also available here

  $("#learnBootstrap").click(function(){
  debugger;
  $('.active').removeClass('active');
  $(this).addClass('active');
  console.log("Learn Bootstrap Active");
  });
  $("#learnHTML").click(function(){
  $('.active').removeClass('active');
  $(this).addClass('active');
  console.log("Learn HTML Active");
  });
  $("#learnCSS").click(function(){
  $('.active').removeClass('active');
  $(this).addClass('active');
  console.log("Learn CSS Active");
  });
  $("#learnJavaScript").click(function() {
  $(".active").removeClass("active");
  $(this).addClass("active");
  console.log("Learn JavaScript Active");
  });
  $("#learnjQuery").click(function() {
  $(".active").removeClass("active");
  $(this).addClass("active");
  console.log("Learn jQuery Active");
  });

    



		
		Todo List
    								
    			Learn Bootstrap
    			Learn HTML
Learn CSS
    			Learn JavaScript
    			Learn jQuery							
    		
  						
  	
 
 
   
      List
   							
   	Learn Bootstrap      
	Learn HTML
	Learn CSS
	Learn JavaScript
	Learn jQuery							

    								
    	
       		Learn Bootstrap goes here
    	
    	
    		Learn HTML content goes here
    	
    	
    		Learn CSS content goes here
    				
    	
        	Learn JavaScript content goes here
    	
    	
    		Learn jQuery content goes here

Sikandar_ali · Accepted Answer

//----- Bootstrap Portion

$("#learnBootstraplink").click(function(){
$('.nav-tabs li').removeClass('active');
$('.bootstrap').addClass('active');
$('.tab-pane').removeClass('in active');
$('.tab-content div#learnBootstrap').addClass('in active');
console.log("Learn Bootstrap Active");
});
//------ HTML Portion

$("#learnHTMLlink").click(function(){
$('.nav-tabs li').removeClass('active');
$('.html').addClass('active');
$('.tab-pane').removeClass('in active');
$('.tab-content div#learnHTML').addClass('in active');
console.log("Learn HTML Active");
});
//------ CSS Portion

$("#learnCSSlink").click(function(){
$('.nav-tabs li').removeClass('active');
$('.css').addClass('active');
$('.tab-pane').removeClass('in active');
$('.tab-content div#learnCSS').addClass('in active');
console.log("Learn css Active");
});
//------- JS Portion

$("#learnJavaScriptlink").click(function(){
$('.nav-tabs li').removeClass('active');
$('.js').addClass('active');
$('.tab-pane').removeClass('in active');
$('.tab-content div#learnJavascript').addClass('in active');
console.log("Learn js Active");
});
//------- JQUERY Portion

$("#learnjQuerylink").click(function(){
$('.nav-tabs li').removeClass('active');
$('.jquery').addClass('active');
$('.tab-pane').removeClass('in active');
$('.tab-content div#learnJQuery').addClass('in active');
console.log("Learn jquery Active");
});

You have to add attribute id in todo list items for having click functionality and add classes in the list items of nav-tab list for identifying.

 
    Todo List
                              
            Learn Bootstrap
            Learn HTML
            Learn CSS
            Learn JavaScript
            Learn jQuery                         
        
                   


    Bootstrap
    HTML
    CSS
    JS
     Jquery
  


    
      Bootstrap
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
    
      HTMl
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    
    
      CSS
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
    
    
      JS
      Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    
    
      Jquery
      Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Here is the working example JS Fiddle

Selected tab wont show contet inside it

Answers (1)

Related Questions