How to change the contents by using jquery in two different tab

Question

As per the below code, by default home tab is showing blank. Content will display below when we click on product ordering tab. I have written this code in Javascript. But when i tried to implement the same logic in Jquery its not working. Anybody can help to resolve this?

Also one more help, When i clicked the tab, Selected tab should be marked as differnt color like Blue.

function show_menu(elementId) {
  document.getElementById("home").style.display = "none";
  document.getElementById("id2").style.display = "none";
  document.getElementById(elementId).style.display = "block";
}

function show_left_menu(elementId) {
  document.getElementById("quick_add").style.display = "none";
  document.getElementById("solution_builder").style.display = "none";
  document.getElementById("bulk_load").style.display = "none";
  document.getElementById("product_search").style.display = "none";
  document.getElementById("saved_cart").style.display = "none";
  document.getElementById("view_favorites").style.display = "none";
  document.getElementById(elementId).style.display = "block";
}

//$(document).ready(function(){
// $("#home").click(function(){
//$("this").addClass("green");

//document.getElementById("home").style.display="none";
//document.getElementById("id2").style.display="none";
//document.getElementById(elementId).style.display="block";

//$("#home").css("display","none");
//$("#id2").css("display","none");
//$(this).css("display","block");

// });
//});

.wrapper {
  margin: 0px auto 0px auto;
  padding: 3px 0px 0px 0px;
  width: 100%;
}

.container {
  margin: 0px auto 0px auto;
  padding: 0px 0px 0px 0px;
  width: 900px;
  height: 500px;
  background-color: white;
  border: 1px solid green;
}

.clear {
  clear: both;
}

.menu_container {
  margin: 0px;
  padding: 0px;
  width: 900px;
}

.middle_container {
  margin: 0px;
  padding: 0px;
  width: 900px;
}

.middle_container_left {
  margin: 0px;
  padding: 0px;
  width: 300px;
  height: 246px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  float: left;
}

.middle_container_right {
  margin: 0px 0px 0px 10px;
  padding: 0px;
  width: 580px;
  height: 300px;
  /*border: 1px solid black;*/
  float: left;
}

.menu_font {
  margin: 0px 5px 0px 0px;
  width: 100px;
  height: 30px;
  float: left;
  cursor: hand;
  text-align: center;
  padding-top: 5px;
  font-weight: bold;
  background-color: #8eaf64;
  border-radius: 5px 5px 0 0;
  color: white;
}

.menu_font:hover {
  margin: 0px 5px 0px 0px;
  width: 100px;
  height: 30px;
  float: left;
  cursor: hand;
  text-align: center;
  padding-top: 5px;
  font-weight: bold;
  color: white;
  background-color: #64A70B !important;
  border-radius: 5px 5px 0 0;
}

.onoffswitch {
  position: relative;
  width: 63px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.onoffswitch-checkbox {
  display: none;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999999;
  border-radius: 20px;
}

.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 14px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.onoffswitch-inner:before {
  content: "ON";
  padding-left: 6px;
  background-color: #85a857;
  color: #FFFFFF;
}

.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 2px;
  background-color: #EEEEEE;
  color: #999999;
  text-align: right;
}

.onoffswitch-switch {
  display: block;
  width: 30px;
  margin: 6px;
  background: #FFFFFF;
  position: absolute;
  top: -4px;
  bottom: 0;
  right: 26px;
  border: 2px solid #999999;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
  right: -5px;
}

.green {
  color: green;
}

<!DOCTYPE>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>

</head>

<body>
  <div class="wrapper">
    <div class="container">
      <h2 align="center">Demo</h2>

      <div class="menu_container">
        <div class="menu_font" onclick="show_menu('home');">Home</div>

        <div class="menu_font" onclick="show_menu('id2');">Product Ordering</div>
        <div class="clear"></div>
      </div>

      <div class="middle_container">
        <div id="home" style="height: 300px;"></div>
      </div>
      <div class="middle_container" id="id2" style="display:none">
        <div class="middle_container_left">
          <ul style="list-style-type: none;margin:0px;padding:0px;">
            <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('quick_add');">Quick Add</li>
            <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('solution_builder');">Solution Builder</li>
            <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('bulk_load');">Bulk Load</li>
            <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('product_search');">Product Search</li>
            <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('saved_cart');">Saved Cart</li>
            <li style="padding:10px;height:20px;" onclick="show_left_menu('view_favorites');">View Favorites</li>
          </ul>
        </div>
        <div class="middle_container_right" id="quick_add">
          <h2>Quick Add:</h2>
          <table cellpadding="0" cellspacing="0" style="width: 300px;">
            <tr>
              <td>Item Name:</td>
              <td>
                <input list="product_name" name="item_name" />
                <datalist id="product_name">
    								<option value="112-800-00000">
    								<option value="112-700-00000">
    								<option value="700-800-00000">
    								<option value="100-800-00000">
    								<option value="900-800-00000">
    								<option value="600-800-00000">
    								<option value="08000BK07045">
    								<option value="08000BK04045">
    								<option value="08000BK06045">
    						</datalist>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <div class="row col-xs-12 col-sm-12   ">
                  <div class=" dispinline col-sm-offset-5 col-xs-offset-1  col-xs-4 col-sm-2 searchlabel">Enable Search </div>
                  <div class="onoffswitch dispinline ">
                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                    <label class="onoffswitch-label" for="myonoffswitch">
    										<span class="onoffswitch-inner"></span>
    										<span class="onoffswitch-switch"></span>
    									</label>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td style="height: 10px;"></td>
            </tr>
            <tr>
              <td>Quantity:</td>
              <td><input type="textbox" name="Quantity"></td>
            </tr>
            <tr>
              <td style="height: 10px;"></td>
            </tr>
            <tr>
              <td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td>
            </tr>
            <tr>
              <td style="height: 10px;"></td>
            </tr>

          </table>
        </div>
        <div class="middle_container_right" id="solution_builder" style="display:none;">solution builder content</div>
        <div class="middle_container_right" id="bulk_load" style="display:none;">Bulk Load content</div>
        <div class="middle_container_right" id="product_search" style="display:none;">Product Search content</div>
        <div class="middle_container_right" id="saved_cart" style="display:none;">Saved cart content</div>
        <div class="middle_container_right" id="view_favorites" style="display:none;">View Favorites content</div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

$(document).ready(function(){
	$('.menu_font').click(function(){
		var menutype=$(this).attr('data-menuname');
		$('.menu_font').removeClass('active');
		$('.pagecontent').hide();
		$('.'+menutype).show();
		$(this).addClass('active');
	});
	$('.leftmenu').click(function(){
		var menutype=$(this).attr('data-leftmenuname');
		$('.leftmenu').removeClass('active');
		$('.middle_container_right').hide();
		$('#'+menutype).show();
		$(this).addClass('active');
	});
});

.wrapper {
    margin: 0px auto 0px auto;
    padding: 3px 0px 0px 0px; 
    width: 100%;  
}
.container{
    margin: 0px auto 0px auto;
    padding: 0px 0px 0px 0px; 
    width: 900px;  
    height: 500px;
    background-color: white;
    border: 1px solid green;
}
.clear{
    clear: both;
}
.menu_container{    
    margin: 0px;
    padding: 0px;
    width: 900px;
}
.middle_container{
    margin:0px;
    padding:0px;
    width: 900px;
}
.middle_container_left{
    margin:0px;
    padding:0px;
    width: 300px;
    height: 246px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    float:left;
}
.middle_container_right{
    margin:0px 0px 0px 10px;
    padding:0px;
    width: 580px;
    height: 300px;
    /*border: 1px solid black;*/
    float:left;
}
.menu_font{
    margin: 0px 5px 0px 0px;
    width: 100px;
    height:30px;
    float:left;cursor:hand;
    text-align:center;
    padding-top:5px;
    font-weight:bold;
    background-color: #8eaf64;
    border-radius:5px 5px 0 0;  
    color: white;
}
.menu_font:hover{
    margin: 0px 5px 0px 0px;
    width: 100px;
    height:30px;
    float:left;cursor:hand;
    text-align:center;
    padding-top:5px;
    font-weight:bold;   
    color: white;
    background-color:#64A70B !important;
    border-radius:5px 5px 0 0;
}

.onoffswitch {
    position: relative; width: 63px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 6px;
    background-color: #85a857; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 2px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block;
    width: 30px;
    margin: 6px;
    background: #FFFFFF;
    position: absolute;
    top: -4px;
    bottom: 0;
    right: 26px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: -5px; 
}


.green{
color: green;
}
.menu_font.active{ color:#fff; background-color:#06F;}
.leftmenu,..menu_font{ cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="wrapper">
    <div class="container">
        <h2 align="center">Demo</h2>

        <div class="menu_container">
            <div class="menu_font active" data-menuname='homemenu'>Home</div>

            <div class="menu_font" data-menuname='productmenu'>Product Ordering</div>
            <div class="clear"></div>
        </div>

        <div class="middle_container pagecontent homemenu">
            <div id="home" style="height: 300px;"></div>
        </div>
        <div class="middle_container pagecontent productmenu" id="id2"  style="display:none">
            <div class="middle_container_left">
                <ul style="list-style-type: none;margin:0px;padding:0px;">
                    <li style="padding:10px;height:20px;border-bottom: 1px solid black;" class="leftmenu" data-leftmenuname='quick_add'>Quick Add</li>
                    <li style="padding:10px;height:20px;border-bottom: 1px solid black;" class="leftmenu" data-leftmenuname='solution_builder'>Solution Builder</li>
                    <li style="padding:10px;height:20px;border-bottom: 1px solid black;" class="leftmenu" data-leftmenuname='bulk_load'>Bulk Load</li>
                    <li style="padding:10px;height:20px;border-bottom: 1px solid black;" class="leftmenu" data-leftmenuname='product_search'>Product Search</li>
                    <li style="padding:10px;height:20px;border-bottom: 1px solid black;" class="leftmenu" data-leftmenuname='saved_cart'>Saved Cart</li>
                    <li style="padding:10px;height:20px;" class="leftmenu" data-leftmenuname='view_favorites'>View Favorites</li>
                </ul>
            </div>
            <div class="middle_container_right" id="quick_add">
                <h2>Quick Add:</h2>
                <table cellpadding="0" cellspacing="0" style="width: 300px;">
                    <tr>
                        <td>Item Name:</td>
                        <td>                                                        
                            <input list="product_name" name="item_name">
                              <datalist id="product_name">
                                <option value="112-800-00000">
                                <option value="112-700-00000">
                                <option value="700-800-00000">
                                <option value="100-800-00000">
                                <option value="900-800-00000">
                                <option value="600-800-00000">
                                <option value="08000BK07045">
                                <option value="08000BK04045">
                                <option value="08000BK06045">
                              </datalist>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="row col-xs-12 col-sm-12   ">
                                <div class=" dispinline col-sm-offset-5 col-xs-offset-1  col-xs-4 col-sm-2 searchlabel">Enable Search </div>
                                <div class="onoffswitch dispinline "> 
                                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                                    <label class="onoffswitch-label" for="myonoffswitch">
                                        <span class="onoffswitch-inner"></span>
                                        <span class="onoffswitch-switch"></span>
                                    </label>
                                </div>
                            </div>  
                        </td>
                    </tr>
                    <tr><td style="height: 10px;"></td></tr>
                    <tr>
                        <td>Quantity:</td>
                        <td><input type="textbox" name="Quantity"></td>
                    </tr>
                    <tr><td style="height: 10px;"></td></tr>
                    <tr>
                        <td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td>
                    </tr>
                    <tr><td style="height: 10px;"></td></tr>

                </table>
            </div>
            <div class="middle_container_right" id="solution_builder" style="display:none;">solution builder content</div>
            <div class="middle_container_right" id="bulk_load" style="display:none;">Bulk Load content</div>
            <div class="middle_container_right" id="product_search" style="display:none;">Product Search content</div>
            <div class="middle_container_right" id="saved_cart" style="display:none;">Saved cart content</div>
            <div class="middle_container_right" id="view_favorites" style="display:none;">View Favorites content</div>
            <div class="clear"></div>
        </div>      
    </div>
</div>

Answer 2

You can use jquery show/hide function for this.

Updated code

$(document).ready(function(){
    $('.menu_font_home').click(function(){
        $('#id2').hide();
        $('#home').show();
    })
 
    $('.menu_font_product_ordering').click(function(){
        $('#quick_add,#solution_builder,#bulk_load,#product_search,#saved_cart,#view_favorites').hide();
        $('#id2').show();
    })   
});

.wrapper {
  margin: 0px auto 0px auto;
  padding: 3px 0px 0px 0px;
  width: 100%;
}

.container {
  margin: 0px auto 0px auto;
  padding: 0px 0px 0px 0px;
  width: 900px;
  height: 500px;
  background-color: white;
  border: 1px solid green;
}

.clear {
  clear: both;
}

.menu_container {
  margin: 0px;
  padding: 0px;
  width: 900px;
}

.middle_container {
  margin: 0px;
  padding: 0px;
  width: 900px;
}

.middle_container_left {
  margin: 0px;
  padding: 0px;
  width: 300px;
  height: 246px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  float: left;
}

.middle_container_right {
  margin: 0px 0px 0px 10px;
  padding: 0px;
  width: 580px;
  height: 300px;
  /*border: 1px solid black;*/
  float: left;
}

.menu_font {
  margin: 0px 5px 0px 0px;
  width: 100px;
  height: 30px;
  float: left;
  cursor: hand;
  text-align: center;
  padding-top: 5px;
  font-weight: bold;
  background-color: #8eaf64;
  border-radius: 5px 5px 0 0;
  color: white;
}

.menu_font:hover {
  margin: 0px 5px 0px 0px;
  width: 100px;
  height: 30px;
  float: left;
  cursor: hand;
  text-align: center;
  padding-top: 5px;
  font-weight: bold;
  color: white;
  background-color: #64A70B !important;
  border-radius: 5px 5px 0 0;
}

.onoffswitch {
  position: relative;
  width: 63px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.onoffswitch-checkbox {
  display: none;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999999;
  border-radius: 20px;
}

.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 14px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.onoffswitch-inner:before {
  content: "ON";
  padding-left: 6px;
  background-color: #85a857;
  color: #FFFFFF;
}

.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 2px;
  background-color: #EEEEEE;
  color: #999999;
  text-align: right;
}

.onoffswitch-switch {
  display: block;
  width: 30px;
  margin: 6px;
  background: #FFFFFF;
  position: absolute;
  top: -4px;
  bottom: 0;
  right: 26px;
  border: 2px solid #999999;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
  right: -5px;
}

.green {
  color: green;
}

<!DOCTYPE>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>

</head>

<body>
  <div class="wrapper">
    <div class="container">
      <h2 align="center">Demo</h2>

      <div class="menu_container">
        <div class="menu_font_home">Home</div>
        <div class="menu_font_product_ordering">Product Ordering</div>
        <div class="clear"></div>
      </div>

      <div class="middle_container">
        <div id="home" style="height: 300px;"></div>
      </div>
      <div class="middle_container" id="id2" style="display:none">
        <div class="middle_container_left">
          <ul style="list-style-type: none;margin:0px;padding:0px;">
            <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('quick_add');">Quick Add</li>
            <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('solution_builder');">Solution Builder</li>
            <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('bulk_load');">Bulk Load</li>
            <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('product_search');">Product Search</li>
            <li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('saved_cart');">Saved Cart</li>
            <li style="padding:10px;height:20px;" onclick="show_left_menu('view_favorites');">View Favorites</li>
          </ul>
        </div>
        <div class="middle_container_right" id="quick_add">
          <h2>Quick Add:</h2>
          <table cellpadding="0" cellspacing="0" style="width: 300px;">
            <tr>
              <td>Item Name:</td>
              <td>
                <input list="product_name" name="item_name" />
                <datalist id="product_name">
    								<option value="112-800-00000">
    								<option value="112-700-00000">
    								<option value="700-800-00000">
    								<option value="100-800-00000">
    								<option value="900-800-00000">
    								<option value="600-800-00000">
    								<option value="08000BK07045">
    								<option value="08000BK04045">
    								<option value="08000BK06045">
    						</datalist>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <div class="row col-xs-12 col-sm-12   ">
                  <div class=" dispinline col-sm-offset-5 col-xs-offset-1  col-xs-4 col-sm-2 searchlabel">Enable Search </div>
                  <div class="onoffswitch dispinline ">
                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                    <label class="onoffswitch-label" for="myonoffswitch">
    										<span class="onoffswitch-inner"></span>
    										<span class="onoffswitch-switch"></span>
    									</label>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td style="height: 10px;"></td>
            </tr>
            <tr>
              <td>Quantity:</td>
              <td><input type="textbox" name="Quantity"></td>
            </tr>
            <tr>
              <td style="height: 10px;"></td>
            </tr>
            <tr>
              <td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td>
            </tr>
            <tr>
              <td style="height: 10px;"></td>
            </tr>

          </table>
        </div>
        <div class="middle_container_right" id="solution_builder" style="display:none;">solution builder content</div>
        <div class="middle_container_right" id="bulk_load" style="display:none;">Bulk Load content</div>
        <div class="middle_container_right" id="product_search" style="display:none;">Product Search content</div>
        <div class="middle_container_right" id="saved_cart" style="display:none;">Saved cart content</div>
        <div class="middle_container_right" id="view_favorites" style="display:none;">View Favorites content</div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</body>

</html>