jQuery slide down page for Magento

Question

jQuery slide down page for Magento

188 views Asked by cashtrader At 18 June 2015 at 07:19

i'm trying to make a jQuery slide down effect for a Magento website. This is my website http://tinyurl.com/o7f7yhn When i press " Cum functioneaza?" button i would like to have an effect like here: http://tinyurl.com/ojk2n42

I tried to add the code directly into header.phtml, i tried to add it like a static block also but no success.

Can anyone point me on how to make it work?

thanks

I added this code to app/design/frontend/skin/template/page/html/header.phtml:

<html>
<head>
<meta charset="utf-8">
<style>
html,body{
    width:100%;
    padding:0;
    margin:0;
}
 
.dropdownwrap{
    height:auto;
    float:left;
    margin:0px 0px 20px 0px;
    background-color:#434343;
    display:none;
    padding:20px;
}
 
.container{
    width:100%;
    float:left;
}
 
.container h2{
    width:100%;
    float:left;
    padding:40px 0px;
    margin:0;
    text-align:center;
    font-family: 'Patrick Hand SC', cursive;
    font-size:36px;
    color:#434343;
}
 
.dropdownwrap h3{
    width:100%;
    float:left;
    padding:40px 0px;
    margin:0;
    text-align:center;
    font-family: 'Patrick Hand SC', cursive;
    font-size:36px;
    color:white;
}
 
.container p{
    font-family: 'Open Sans', sans-serif;
    font-size:10pt;
    color:#B7B7B7;
    text-align:center;
    padding-bottom:50px;
}
 
.dropdownwrap p{
    font-family: 'Open Sans', sans-serif;
    font-size:10pt;
    color:white;
    text-align:center;
    padding-bottom:50px;
}
 
.container a,
.container a:visited{
    padding:8px 14px;
    font-size:12pt;
    border:1px solid #CCCCCC;
    background-color:#DDDDDD;
    text-decoration:none;
    text-transform:uppercase;
    color:#424242;
    border-radius:3px;
}
 
.container a:hover{
    padding:8px 14px;
    font-size:12pt;
    border:1px solid #F2F2F2;
    background-color:white;
    color:#CCCCCC;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(e){
 
   $('#dropdown').on('click',function(){
 
      $('.dropdownwrap').slideToggle();
 
   });
 
})
</script>
</head>

<body>
<div class="dropdownwrap">This is my test</div>
<p><a id="dropdown" href="#" title="Click This Button">X</a></p>
</body>
</html>

it shows me in the top a little X but it's not working.

Original Q&A

There are 2 answers

**Prashant Valanda** · Answer 1 · 2015-06-18 18:29:49

you cant put whole code in header.

add script

<script>
$(document).ready(function(e) {
 $('#dropdown').on('click',function(){
$('.dropdownwrap').slideToggle();
});
});
</script>

add content

<div class="dropdownwrap"> your text which is by default hide goes here </div>

after add button

<a id="dropdown" href="#" title="Click This Button">button name</a>

add css

<style>.dropdownwrap{
height:auto;
float:left;
margin:0px 0px 20px 0px;
background-color:#434343;
display:none;
padding:20px;}</style>

change in css according to your need

**Yogesh Trivedi** · Answer 2 · 2015-06-18 08:34:59

You have to write some thing like below code

<script>
jQuery.noConflict();
jQuery('.banner-btn').click(function(){
      $( "#name_of_div_to_slide" ).slideDown( "slow");
</script>

I hope it may help you to sort it out

Thanks, Harry P.

TechQA.

jQuery slide down page for Magento

There are 2 answers

Related Questions in JQUERY

Related Questions in MAGENTO

Related Questions in SLIDE

Popular Questions

Popular Tags

Trending Questions