Open sidebar window with jQuery

Question

I am trying to make the something like this.

But somehow I am not able to make it same.

What I have tried

I am able to create replica of this but issue is that the button are fixed.

Is that possible by putting left property in CSS ?

If any can guide me with this then it would be great.

Thanks.

( function($) {
 
  var map = new google.maps.Map(document.getElementById('new_map_canvas'), {
     zoom: 4,
     center: new google.maps.LatLng(57.658339,-102.918287),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     mapTypeControl: false,
     streetViewControl: false,
     panControl: false,
     zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_BOTTOM
     }
    });
  
 $("#store_").click(function(){
  //$(".side_window_content").show("slide", { direction: "left" }, 1000 );
        $(".side_window_content").slideToggle();
 });
} )(jQuery);

#new_map_canvas{
 border:5px solid;
}
#store_, #direction_{
 position:absolute;
 z-index:5;
 -webkit-transform: rotate(90deg);   
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 transform: rotate(90deg);
}
.side_window, .side_window_content{
 position:absolute;
 z-index:6;
}
.side_window_content{
 width:300px;
 height:660px;
 background:white;
 display:none;
}
.side_window{
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="side_window_content">
 <input type="text" id="searchStore" placeholder="Search address" />
</div>
<div class="side_window">
 <input type="button" id="store_" value="Store" />
 <input type="button" id="direction_" value="Direction" />
</div>
<div id="new_map_canvas" style="height:660px; width:auto;"></div>

See here : http://stackoverflow.com/questions/14470081/jquery-slidetoggle-horizontal-alternative — Diode, Apr 07 '15 at 05:11
Thanks for your reply. But what I want to have is when side info open up button also should move. — Twix, Apr 07 '15 at 05:13
Actually I had to go with different approach as I was not able to implement your code into mine..But thanks for your effort and time (Y) — Twix, Apr 08 '15 at 05:04
Yes, i can understand the changes arise during progress of devolpment! — Vikrant, Apr 08 '15 at 05:05

Vikrant · Accepted Answer · 2015-04-07T05:33:10.943

2

Here is my code for my own blog. Hope, you want similar one:

$('#icox').on('click', function() {
    $(this).children().toggleClass('active');
    $('#menux').toggleClass('active');
});

Then in CSS you just have to play with margin-left: -300px; or with css3 transform: translate.

After Edit:

Here is the Working Demo

edited Apr 07 '15 at 05:33

answered Apr 07 '15 at 05:13

Vikrant

4,920
17
48
72

Yes I want something similar to this. But search Icon is not inline with the opening div and that is the place where I am struggling. – Twix Apr 07 '15 at 05:19
dear @Rahul used my code to do same.. here is original one , that you should accept – Vikrant Apr 07 '15 at 05:32
@Vikrant It was your code but my version is better, which is what you ended up doing. Also, a FYI - if you give `inline` for all div's on the page, thats not good. Other div's on the same page will be affected too. – Rahul Desai Apr 07 '15 at 05:41
if you think so, then you should have created your own demo! don't prove that with simple edits to other's efforts! – Vikrant Apr 07 '15 at 05:44
Alright. +1 :) But you should really use the CSS as I did: `#icox, #menux{ display: inline; }` – Rahul Desai Apr 07 '15 at 06:12
if you see carefully, it is there in `css`of the demo: http://jsfiddle.net/Vikrant29/6H8xr/10/ – Vikrant Apr 07 '15 at 06:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74609/discussion-between-vikrant-and-rahul-desai). – Vikrant Apr 07 '15 at 06:25

score 1 · Answer 2 · answered Apr 07 '15 at 05:09

1

you can use animate width to toggle. $('.side_window_content').animate({width: 'toggle'});

answered Apr 07 '15 at 05:09

stanze

2,456
10
13

Thanks for your reply. But what I want to have is when side info open up button also should move. – Twix Apr 07 '15 at 05:13
@RahulDesai See [here](http://www.starbucks.ca/store-locator/search/geolocate). I am trying to creating this. – Twix Apr 07 '15 at 05:18

score 1 · Answer 3 · edited May 23 '17 at 10:27

1

with some modifications in @Vikrant example :

#icox {
    float: left;
    width: 60px;
    height: 60px;
    background-color: rgb(218, 218, 218);
}

http://jsfiddle.net/6H8xr/9/

edited May 23 '17 at 10:27

Community

1
1

answered Apr 07 '15 at 05:31

Diode

24,570
8
40
51

Open sidebar window with jQuery

3 Answers3

After Edit: