Jquery Navigation Menu: Hide and show Menu jquery

Only Create index.html

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Plugin on click Expand</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(function () {
    $('.newclass1').on('click', function () {
 $ ('.newclass1'). removeClass("newclass1").addClass("newclassadd");
        
    });
});
$(document).click(function(e){
var divval=e.target;
var classnameval=divval.className;
if(classnameval=="newclassadd")
{
$ ('.newclassadd'). removeClass("newclassadd").addClass("newclass1");
}
});
</script>
<script type="text/javascript">
$(function () {
    $('.newclass2').on('click', function () {
 $ ('.newclass2'). removeClass("newclass2").addClass("newclassadd1");
       
    });
});
$(document).click(function(e){
var divval=e.target;
var classnameval=divval.className;
if(classnameval=="newclassadd1")
{
$ ('.newclassadd1'). removeClass("newclassadd1").addClass("newclass2");
}
});
</script>
<style>
.newclass1 {
 float:left;
 padding:10px;
 /*background:#333;*/
margin:10px;
 overflow:auto;
 width:12%;
 border: 4px solid #ccc;
}
.newclass1 h2 {
 text-align:center;
}
.newclassadd {
 float:left;
 padding:10px;
 /*background:#333;*/
margin:10px;
 overflow:auto;
 width:70%;
 border: 4px solid #ccc;
}
.newclassadd h2 {
 text-align:center;
}
.containermeadd {
 width: 67% !important;
 float:left;
}
.rightway {
 float:right;
 padding:10px;
}
.rightway ul li {
}
.rightway li {
 list-style-type:none;
}
.newclass2 {
 float:left;
 padding:10px;
 /*background:#333;*/
margin:10px;
 overflow:auto;
 width:12%;
 border: 4px solid #ccc;
}
.newclass2 h2 {
 text-align:center;
}
.newclassadd1 {
 float:left;
 padding:10px;
 /*background:#333;*/
margin:10px;
 overflow:auto;
 width:70%;
 border: 4px solid #ccc;
}
.newclassadd1 img {
 height:56px;
 width:100%;
 float:left;
}
.newclassadd1 h2 {
 text-align:center;
}
.hightimg {
 text-align:center;
 height:50px;
 width:50px;
}
.hightimg img {
 height:56px;
 width:100%;
 margin:auto;
}
.ram {
 text-align:center!important;
 font-size:12px!important;
 margin:0px!important;
}
.panel-default > .panel-heading {
 background-color: #f5f5f5;
 border-color: #ddd;
 color: #333;
}
.panel-heading img {
 width:50px;
 height:50px;
}
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .newclass1 {
 border: 4px solid #ccc;
 float: left;
 margin: 10px auto!important;
 overflow: auto;
 padding: 10px;
 width: 100%!important;
}
.newclassadd {
 border: 4px solid #ccc;
 float: left;
 margin: 10px auto!important;
 overflow: auto;
 padding: 10px;
 width: 100%!important;
}
.newclass2 {
 border: 4px solid #ccc;
 float: left;
 margin: 10px auto!important;
 overflow: auto;
 padding: 10px;
 width: 100%!important;
}
.newclassadd1 {
 border: 4px solid #ccc;
 float: left;
 margin: 10px auto!important;
 overflow: auto;
 padding: 10px;
 width: 100%!important;
}
}
</style>
</head>
<body>
<div class="newclass1">
  <h2>Hide & Show</h2>
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <span class="hightimg"> <img src="img/image.png" alt="" height="50" width="50"></span> <br>
          Menu1 </a> </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          <div class="containermeadd">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab_a" data-toggle="tab"><img src="img/image.png" alt="poster-print" height="70" width="70"></a></li>
              <li><a href="#tab_b" data-toggle="tab"><img src="img/image.png" alt="" height="70" width="70"></a></li>
              <li><a href="#tab_c" data-toggle="tab"><img src="img/image.png" alt="" height="70" width="70"></a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane fade in active" id="tab_a">
                <h4>Pane A</h4>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                  ac turpis egestas.</p>
              </div>
              <div class="tab-pane fade" id="tab_b">
                <h4>Pane B</h4>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
              </div>
              <div class="tab-pane fade" id="tab_c">
                <h4>Pane C</h4>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                  ac turpis egestas.</p>
              </div>
            </div>
            
          </div>
          
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <img src="img/image.png" alt="poster-print" height="50" width="50"></span> <br>
          Menu2 </a> </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Thursday 30 July 2015

Hide and show Menu jquery

Only Create index.html

No comments:

Post a Comment