This is very simple drop down code using html, javascript,css. This code opening/closing container every drop down onclick heading.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Drop down content with onclick using javascript</title>
<style>
* { margin:0; padding:0; font-family:sans-serif; }
body { width:650px; }
.drop_h, li, h2 { margin-bottom:15px; }
.drop_h {
text-decoration:none;
font-size:16px;
display:block;
}
.content {
display:none;
}
#improved li {
position:relative;
overflow:hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#original .drop_h').click(function(e){
e.preventDefault();
$(this).closest('li').find('.content').slideToggle();
});
$('#improved .drop_h').click(function(e){
e.preventDefault();
$(this).closest('li').find('.content').not(':animated').slideToggle();
});
});
</script>
</head>
<body>
<h2>Drop Down Simple Script</h2>
<ul id='original'>
<li>
<a href='#' class='drop_h'>Heading 1</a>
<div class='content'>
<p>PHP5 introduces 'interfaces' . An interface defines the methods a class must implement. All the methods defined in an interface must be public. An interface helps you design common APIs. It is not designed as a blueprint for classes, but just a way to standardize a common API. A big advantage of using interfaces is that a class can implement any number of interfaces. You can still only 'extend' on parent class, but you can 'implement' an unlimited number of interfaces.</p>
</div>
</li>
<li>
<a href='#' class='drop_h'>Heading 2</a>
<div class='content'>
<p>PHP5 introduces a special function called '__autoload()' (the word 'autoload' prefixed by double underscores). This function allows you to avoid writing a long list of includes at the top of your script by defining them inside this function. So you can automatically load object files when PHP encounters a class that hasn't been defined </p>
<p>PHP5 introduces 'interfaces' . An interface defines the methods a class must implement. All the methods defined in an interface must be public. An interface helps you design common APIs. It is not designed as a blueprint for classes, but just a way to standardize a common API. A big advantage of using interfaces is that a class can implement any number of interfaces. You can still only 'extend' on parent class, but you can 'implement' an unlimited number of interfaces.</p>
</div>
</li>
</ul>
<h2>Animated Drop Down </h2>
<ul id='improved'>
<li>
<a href='#' class='drop_h'> Improved Heading 1</a>
<div class='content'>
<p>PHP5 introduces 'interfaces' . An interface defines the methods a class must implement. All the methods defined in an interface must be public. An interface helps you design common APIs. It is not designed as a blueprint for classes, but just a way to standardize a common API. A big advantage of using interfaces is that a class can implement any number of interfaces. You can still only 'extend' on parent class, but you can 'implement' an unlimited number of interfaces.</p>
</div>
</li>
<li>
<a href='#' class='drop_h'>Improved Heading 2</a>
<div class='content'>
<p>PHP5 introduces a special function called '__autoload()' (the word 'autoload' prefixed by double underscores). This function allows you to avoid writing a long list of includes at the top of your script by defining them inside this function. So you can automatically load object files when PHP encounters a class that hasn't been defined </p>
<p>PHP5 introduces 'interfaces' . An interface defines the methods a class must implement. All the methods defined in an interface must be public. An interface helps you design common APIs. It is not designed as a blueprint for classes, but just a way to standardize a common API. A big advantage of using interfaces is that a class can implement any number of interfaces. You can still only 'extend' on parent class, but you can 'implement' an unlimited number of interfaces.</p>
</div>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Drop down content with onclick using javascript</title>
<style>
* { margin:0; padding:0; font-family:sans-serif; }
body { width:650px; }
.drop_h, li, h2 { margin-bottom:15px; }
.drop_h {
text-decoration:none;
font-size:16px;
display:block;
}
.content {
display:none;
}
#improved li {
position:relative;
overflow:hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#original .drop_h').click(function(e){
e.preventDefault();
$(this).closest('li').find('.content').slideToggle();
});
$('#improved .drop_h').click(function(e){
e.preventDefault();
$(this).closest('li').find('.content').not(':animated').slideToggle();
});
});
</script>
</head>
<body>
<h2>Drop Down Simple Script</h2>
<ul id='original'>
<li>
<a href='#' class='drop_h'>Heading 1</a>
<div class='content'>
<p>PHP5 introduces 'interfaces' . An interface defines the methods a class must implement. All the methods defined in an interface must be public. An interface helps you design common APIs. It is not designed as a blueprint for classes, but just a way to standardize a common API. A big advantage of using interfaces is that a class can implement any number of interfaces. You can still only 'extend' on parent class, but you can 'implement' an unlimited number of interfaces.</p>
</div>
</li>
<li>
<a href='#' class='drop_h'>Heading 2</a>
<div class='content'>
<p>PHP5 introduces a special function called '__autoload()' (the word 'autoload' prefixed by double underscores). This function allows you to avoid writing a long list of includes at the top of your script by defining them inside this function. So you can automatically load object files when PHP encounters a class that hasn't been defined </p>
<p>PHP5 introduces 'interfaces' . An interface defines the methods a class must implement. All the methods defined in an interface must be public. An interface helps you design common APIs. It is not designed as a blueprint for classes, but just a way to standardize a common API. A big advantage of using interfaces is that a class can implement any number of interfaces. You can still only 'extend' on parent class, but you can 'implement' an unlimited number of interfaces.</p>
</div>
</li>
</ul>
<h2>Animated Drop Down </h2>
<ul id='improved'>
<li>
<a href='#' class='drop_h'> Improved Heading 1</a>
<div class='content'>
<p>PHP5 introduces 'interfaces' . An interface defines the methods a class must implement. All the methods defined in an interface must be public. An interface helps you design common APIs. It is not designed as a blueprint for classes, but just a way to standardize a common API. A big advantage of using interfaces is that a class can implement any number of interfaces. You can still only 'extend' on parent class, but you can 'implement' an unlimited number of interfaces.</p>
</div>
</li>
<li>
<a href='#' class='drop_h'>Improved Heading 2</a>
<div class='content'>
<p>PHP5 introduces a special function called '__autoload()' (the word 'autoload' prefixed by double underscores). This function allows you to avoid writing a long list of includes at the top of your script by defining them inside this function. So you can automatically load object files when PHP encounters a class that hasn't been defined </p>
<p>PHP5 introduces 'interfaces' . An interface defines the methods a class must implement. All the methods defined in an interface must be public. An interface helps you design common APIs. It is not designed as a blueprint for classes, but just a way to standardize a common API. A big advantage of using interfaces is that a class can implement any number of interfaces. You can still only 'extend' on parent class, but you can 'implement' an unlimited number of interfaces.</p>
</div>
</li>
</ul>
</body>
</html>
