Additional page without reloading

You have a page with your products.

The visitor liked the product and wants to know where it can be obtained.

If you place a map on the page with the indication of retail outlets, it will take up a lot of space.

This option will allow placing on the page only a button, when you click on which opens a map with the location of outlets.

Code:

<script>
jQuery(document).ready(function() {
	jQuery("#open").click(function(){
		jQuery("div#panel").slideDown("slow");	
	});		
	jQuery("#close").click(function(){
		jQuery("div#panel").slideUp("slow");	
	});			
	jQuery("#toggle a").click(function () {
		jQuery("#toggle a").toggle();
	});				
});
</script>

HTML

<div id="toppanel">
	<div id="panel">
		<div class="content clearfix">

<<!--Here is the content of the panel-->>

                </div>
	</div> 

	<div class="tab">
		<ul class="login">

	        <li class="welcome"></li>			
			<li id="toggle">
<<!--In the reference, instead of the mandatory href attribute, the required attribute name-->>
				<a name="" id="open" class="open" >Open<</a>
				<a name="" id="close" style="display: none;" class="close" >Закрыть<</a>			
			</li>
		</ul> 
	</div> 	
</div> 

CSS

.clear {
	clear: both;
	height: 0;
	line-height: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}

.tab {
	border-top: 2px solid #555555;
	height: 42px;
	position: relative;
	top: 0;
	z-index: 999;
}
.tab ul.login {
	display: block;
	position: relative;
	float: right;
	clear: right;
	height: 42px;
	width: auto;
	font-weight: bold;
	line-height: 42px;
	margin: -2px 0 0;
	right: 283px;
	font-size: 80%;
}
.tab ul.login li.welcome {
	text-align: left;
	padding: 0 6px;
	display: block;
	float: left;
	height: 42px;
}
.tab .sep {
border: 2px solid #555555;
}
.tab ul.login li#toggle {
	border: 1px solid #555555;
	display: block;
	height: 42px;
	padding: 0 6px;
	text-decoration: none;
}
.tab a.open {
	height: 20px;
	line-height: 20px !important;
	cursor: pointer;
	display: block;
	width: 60px;
	position: relative;
	top: 11px;
}
.tab a.close{
	height: 20px;
	line-height: 20px !important;
	cursor: pointer;
	display: block;
	width: 60px;
	position: relative;
	top: 11px;   
}
#toppanel {
	position: relative;
	top: 0;
	width: 100%;
	z-index: 999;
	margin-left: auto;
	margin-right: auto;    
}
#panel {
	width: 99%;
	width-max: 1360px;
	box-shadow: 0 2px 4px #000000;
	height: 450px;	
	position: relative;
	z-index: 3;
	display: none;
	overflow: auto;
}

I wish you creative successes.

This entry was posted in Free Scripts. Bookmark the permalink.
А так же:

Leave a Reply

Your email address will not be published. Required fields are marked *