CODEWITHSUNDEEP
jquerycss
user3097736
user3097736

Reputation: 284

Adding another div

Hello I have here a hide/toggle div using jquery. I want to add another div class="sidebar-toggle".

Below is the photo of sidebar open and close. The blue div is the class="sidebar-toggle" that I want to add, class="sidebar-toggle" is the link for hide/toggle div.

Here's my current output http://jsfiddle.net/a3n7p/

Sidebar-toggle Open

enter image description here

Sidebar-toggle Closed

enter image description here

Upvotes: 0

Views: 76

Answers (3)

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

Check this out. I hope this is want you need.

Updated Fiddle

Changes:

HTML

<div class="framecontentLeft">
  <div class="innertube">

  </div>
</div>
<div class="sidebar-toggle"></div> <!--repositioned slidebar-->

CSS

    .sidebar-toggle {
      top: 0;
      left: 220px;
      width: 20px;
      height: 100%;
      background: blue;
      float:left;
      position:absolute;
      z-index:10;
}

JQuery - Added this.

if (sidebarStatus == false) {
        $(this).animate({
            marginLeft: "-220px"},'fast');
}else{
        $(this).animate({
            marginLeft: "-220px"},'fast');
}

Upvotes: -1

Nicholas Hazel
Nicholas Hazel

Reputation: 3750

So, I have no idea what you're doing with your styling, but I got frustrated stumbling around it and came up with this. Hopefully you can work with it.

View Here: http://jsfiddle.net/a3n7p/15/

HTML

<div id="header"></div>

<div id="leftNav">
    <div id="toggler"></div>
</div>

CSS

* {
    margin:0; padding:0;
}
#header {
    background:green;
    width:100%;
    height:100px;
}
#leftNav {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    background:#CCC;
    width:220px;
}
#toggler {
    position:relative;
    width:20px;
    height:100%;
    background:#111;
    margin-left:220px;
}

JS:

$(document).ready(function() {
  var sidebarStatus = false;
  $('#toggler').click(function() {
     if (sidebarStatus == false) {
      $('#leftNav').animate({
        marginLeft: "-220px",
        opacity: "1"
      }, 'fast');
      sidebarStatus = true;
    }
    else {
      $('#leftNav').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'fast');
      sidebarStatus = false;
    }
  });
});

Upvotes: 1

Ali Gajani
Ali Gajani

Reputation: 15091

Solution

Now, this is based on the discussions you did above, and the expected images you presented.

enter image description here

I used a bit of CSS and jQuery, although there are better ways to achieve this.

Note: Just use z-index:3; on .sidebar-toggle to make it clickable, all of it.

CSS

This was added to the .sidebar-toggle class.

left:33%;
top:0%;
position:fixed;
z-index:3;

jQuery

A bit of jQuery was used as well, for example, here's a snippet. The same for else { } with 0px;

 $('.sidebar-toggle').animate({
        marginLeft: "-220px",
        opacity: "1"
      }, 'fast');

Upvotes: 2

Related Questions