toggle function :
toggle function are used cin jQuery 1.8 toogle attach two or more function to toggle between the click event for selected element.
When first time click on element then first function call then again second time click another function call.
Syntax :
$(element).toggle(function);
Demo link :
http://freeteachnology.hol.es/toggle/
Code link :
if without toogle follwoing function you can use :
Without toogle :
<script>
if(display==true)
{
$(“#name”).show();
}else if(display==false)
{
$(“#name”).hide();
}
</script>
Using toggle :
<script>
$(“#name”).toggle();
</script>
Following file structure create :
1-header.php,
2-footer.php,
3-index.php,
1-header.php file include bootstrap links well as jquery link,
Code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery toggle() function</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- start:header -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Free Teachnology</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only"></span></a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</br></br></br>
<!-- end:header -->
2-footer.php :
footer.php file include bootstrap css link
Code :
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Start::footer -->
<footer>
<div class="footer footer-bottom">
<div class="container">
<div class="text-muted ">
<a href="https://freeteachnology.blogspot.in/" >Free Teachnology</a>
</div>
<p class="pull-left"> Copyright © <?php echo date('Y');?>. Design and Develop by - Disuza Jen. </p>
<div class="pull-right">
<ul class="nav nav-pills payments">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-link"></i></li>
</ul>
</div>
</div>
</div>
<!--/.footer-bottom-->
</footer>
<!-- End::footer -->
<style type="text/css">
.footer-bottom {
margin-top:220px;
background: #E3E3E3;
border-top: 1px solid #DDDDDD;
padding-top: 10px;
padding-bottom: 10px;
}
.footer-bottom p.pull-left {
padding-top: 6px;
}
</style>
</body>
</html>
3-index.php
toggle function used to call two function one after one. Its best feature of jquery, i like jquery.
Index.php file full code below :
<?php include('header.php'); ?>
<body>
<br><br><br>
<div class="cleafix"></div>
<div class="container">
<div class="alert alert-info">
<strong>Hi..</strong> jQuery toggle() fucntion.
</div>
<div class="alert alert-warning">
<a href="https://drive.google.com/open?id=0BxmTZPVcu72fV2NMeS1FQkZ0ZWs" class="btn btn-xs btn-warning pull-right" target="blank();">Click</a>
<strong> Code download link-</strong>
</div>
<div class="span2">
<div class="btn-group">
<a class="btn btn-info jqueryShow" data-toggle="dropdown" href="javascript:void(0)">
Hide
</a>
</div>
</div>
<br><br>
<div class="container-fluid well span3 jqueryToggle" >
<div class="row">
<div class="col-lg-3">
<h3>Disuza Jen</h3>
<h6>Email: disuzajen@gmail.com</h6>
<h6>Country: India</h6>
</div>
</div>
</div>
</div>
</br>
<?php include('footer.php'); ?>
<script>
$('.jqueryShow').click(function()
{
//link text value get::-
if($(this).text() == 'Show')
{
$(this).text("Hide" );
}else {
$(this).text( "Show" );
}
$('.jqueryToggle').toggle();
}
);
</script>
above exmple at footer toogle() function used, toggle function call when click on hide link at that time call jquery function at that time check text link clicked value and change text attribute of link with respective.
<script>
$('.jqueryShow').click(function()
{
//link text value get::-
if($(this).text() == 'Show')
{
$(this).text("Hide" );
}else {
$(this).text( "Show" );
}
$('.jqueryToggle').toggle();
}
);
</script>
thanks for supporting me,
Comments