How to make a panel toggle left/right?

Question

I have the following code, below it toggles up and down fine. but how can i make the panel to toggle left and right? I want the SLide Panel to show at the edge when closed and show at the expanded side when opened

something like this but on the left instead of at the top. http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html

<script type="text/javascript">
$(document).ready(function(){

    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        //$("#panel").slideToggle("slow", {direction: "left"}, 100);
        $(this).toggleClass("active"); return false;
    });


});
</script>

CSS

<style>


/** left sliding panel **/

#panel {
/** background: #754c24; */
    height: 500px;
    display: none;
}
.slide {
    margin: 0;
    padding: 0;
/*  border-top: solid 4px #422410;  */
    background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
    background: url(images/white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
/*  display: block;  color: #fff;*/
    font: bold 120%/100% Arial, Helvetica, sans-serif;

    text-decoration: none;
}

</style>

Html

    <div id="panel">

 content will be shown here.

    </div> <!--  end  Panel content-->

    <div id="openCloseWrap">
     <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
    </div>
</div>

This looks helpful: http://stackoverflow.com/questions/521291/jquery-slide-left-and-show — George, Apr 29 '13 at 20:49
possible duplicate of [jquery slideToggle direction](http://stackoverflow.com/questions/6555781/jquery-slidetoggle-direction). See also http://www.learningjquery.com/2009/02/slide-elements-in-different-directions — j08691, Apr 29 '13 at 20:50
Its not a duplicate of the one you are referring to, none of them worked and was also not accepted thats why i am looking for an acceptable solution and had to post this. — user244394, Apr 29 '13 at 20:51

score 2 · Accepted Answer · answered Apr 29 '13 at 21:03

2

Be sure to include jQuery and jQueryUI. Here is my example:

$("button").click(function () {
  $('div').hide("slide", {
    direction: "left"
  }, 1000);
});

answered Apr 29 '13 at 21:03

George

367
1
10

is it possible to have the button slide left and right something like this webdesignerwall.com/demo/jquery/simple-slide-panel.html, so that when its closed only the button is visible. but this is left to right instead of top to bottom. – user244394 Apr 29 '13 at 21:17

score 0 · Answer 2 · answered Apr 29 '13 at 20:59

0

Might need a little more info about what you're looking for exactly.

But this might help you: http://jsfiddle.net/anJVs/1/

The main difference here is:

$("#panel").animate({width: 'toggle'});

Are you looking for something like that?

answered Apr 29 '13 at 20:59

russter

133
1
8

is ti possible to have the button slide left and right something like this http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html, so that when its closed only the button is visible. – user244394 Apr 29 '13 at 21:13

How to make a panel toggle left/right?

2 Answers2