How to slide out div on click

Question

I have two divs positioned adjacent to each other.Have used absolute position to place it adjacent to each other. the problem is I want to show the second div only after clicking on the link present in first link using jQuery.

Fiddle

html

<body>

  <div class="container">
            </div>


    <div class="wrapper">
        <div class="login-wrapper">
            <div class="accounts-wrapper">
              <ul class="user-account">
                <li>
                  <a href="www.abc.com">
                        <span class="account-name">Zafar Khan</span>
                      </a>
                    </li>
                    <li>
                      <a href="www.abc.com">
                        <span class="account-name">Zafar Khan</span>
                      </a>
                    </li>

                  </ul>
            </div>          
         </div>  
        </div>
    </div>
  <div class="login-form-holder">
            <div class="user-account form-block">
                <img src="images/img_avatar.jpg"/>
                <div class="account-holder">John Deo</div>

            </div>

         </div>
         </div>

  </div>


</body>

css

/*Login screen*/
.wrapper{
    position:absolute;
     z-index:15;
     top:40%;
     left:30%;
     margin:-100px 0 0 -150px;
    }

 .login-wrapper {
    width:200px;
    margin:auto 0;
    padding:auto 0;
    }
.login-header {
    color:#FFFFFF;
    font-size:1.5em;
    padding:1em;
    background:#2380DE;
    height:25px;
}

.user-account{
    list-style:none;
    background:#FFFFFF;
    -webkit-box-shadow: 2px 2px 8px 0px rgba(227,227,231,1);
    -moz-box-shadow: 2px 2px 8px 0px rgba(227,227,231,1);
    box-shadow: 2px 2px 8px 0px rgba(227,227,231,1);
}

.user-account li {
    background: url("../images/arrow-right.png") no-repeat scroll 95% 50% transparent;
    list-style-type: none;
    padding: 1em 1em;
    vertical-align: middle;
    border-bottom:1px #EFEFEF solid;
    display:block;
    position:relative;
    cursor:pointer;
}

.user-account li:hover {
 background:#EFEFEF;
}
.user-account li > a img {
    width:50px;
    height:50px;
    -webkit-border-radius: 50%;
     vertical-align: middle;
     margin-right:1em;

}
.user-account li > a span.account-name {
    vertical-align: middle;
    color: #427FED;
}

.grey-background{
  background:#F6F7FB;
}

.toprightlinks{
  margin-right: 1em;
  display:block;
}

.linkblock li{
  display:inline;
  margin-right:.6em;

}

.linkblock li > a{
  padding:.6em .6em .4em .4em;
  color:#FFFFFF;
  -webkit-border-radius: 5px;
  border-color: solid 10px rgba(0,0,0,0.2)
  text-align:center;
}

.linkblock li > a.remove{
  background:#F15246;
}

.linkblock li > a.add{
  background:#91DE36;

}
/*Login form*/
.login-form-holder{
    position:absolute;
     z-index:15;
     top:40%;
     left:60%;
     margin:-100px 0 0 -150px;

}

.form-block{
    text-align:center;
    padding-bottom:.5em;
    margin-bottom:1em;
    }

.login-form-header {
    color:#2d87e3;
    font-size:1.5em;
    padding:1em;
    background:#efefef;
    height:25px;
}
.login-form-holder img{
    width:100px;
    height:100px;
    -webkit-border-radius: 50%;
    padding:1em 1em;
}
.account-holder{
    color:#2482e2;
    font-weight:900;
    font-size:20px;
    padding-bottom: 1em;
}

@jyoti can you please elaborate on what you want to achieve? Which div is the "second" div? — aaron-bond, Feb 11 '14 at 09:32
on clicking the name , adjacent div i.e name with image must slide out. Its more like, div with link should be in the center and when link is clicked, adjacent div with name and image should push the link div and slide in the side — jyoti, Feb 11 '14 at 09:34
possible duplicate of [Switch/toggle div (jquery)](http://stackoverflow.com/questions/752847/switch-toggle-div-jquery) — Dropout, Feb 11 '14 at 09:57
Duplicate of a million other questions. Please do your research before asking. — Dropout, Feb 11 '14 at 09:57
This [http://stackoverflow.com/questions/11598217/how-to-slide-div-on-button-click] is very much similar and its already solved over there. — Purushotham, Feb 11 '14 at 10:06

Tom Hazledine · Answer 1 · 2014-02-11T09:49:51.180

Not exactly sure what you want to click and what you want to hide/show, but this should work.

In the HTML, add these classes to the element you want to click on and the div you want to show:

class="thing-to-click"
class="thing-to-show hidden-thing"

then add this to your CSS:

.thing-to-hide.hidden-thing{
  display:none;
}

then use this jQuery:

$('.thing-to-click').click(function(){
  $('.thing-to-hide').toggleClass('hidden-thing');
});

Now you can use CSS to control how you hide/show the div: display:none; is just the simplest method.

Using your code, I made this example: codepen.io/pen For this I assumed the element you wanted to click was the first Zafar Khan link, and the thing you wanted to hide/show was the login-form-holder div.

If you don't want the change to be reversible, swap toggleClass to removeClass.

I prefer to keep all animations and styling within CSS. If all I'm doing with jQuery is adding and removing classes, it feels like interactions and styles are nicely separated. — Tom Hazledine, Feb 11 '14 at 10:11

score 0 · Answer 2 · answered Feb 11 '14 at 09:44

0

$("link to click on").click(function(){
    $(".login-form-holder").show("slow")
});

Please let me know if you are stuck on anything

answered Feb 11 '14 at 09:44

YSK .CO

164
1
14

How to slide out div on click

2 Answers2