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 Ready Code. Bookmark the permalink.
А так же:

Leave a Reply

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