Как раздвинуть div по щелчку

-1

У меня есть два div, расположенных рядом друг с другом. Вы использовали absolute положение, чтобы поместить его рядом друг с другом. проблема в том, что я хочу показать второй div только после нажатия на ссылку, присутствующую в первой ссылке, используя jQuery.Как раздвинуть div по щелчку

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; 
}

источник

2014-02-11 jyoti

, что ссылка идет на jsfiddle домашнюю страницу. – gpgekko

Я отредактировал ваш пост с помощью ссылки jsfiddle – Askanison4

@jyoti можете ли вы рассказать о том, чего вы хотите достичь? Какой div является «вторым» div? – Askanison4

Не совсем уверен, что вы хотите, чтобы нажать и то, что вы хотите, чтобы скрыть/показать, но это должно работать.

В HTML, добавьте эти классы элемент, который вы хотите, чтобы нажать на и DIV вы хотите, чтобы показать:

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

затем добавьте в ваш CSS:

затем использовать это JQuery:

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

Теперь вы можете использовать CSS, чтобы контролировать, как скрыть/показать DIV: display:none; является Jus t - самый простой метод.

Используя свой код, я сделал этот пример: codepen.io/pen Для этого я принял элемент, который вы хотели, чтобы нажать был первым Zafar Khan ссылку, а что вы хотели, чтобы скрыть/показать было login-form-holder дел.

Если вы не хотите, чтобы изменение было обратимым, замените toggleClass на removeClass.

источник

2014-02-11 09:41:54

Зачем использовать 'toggleClass()'? Почему не просто «toggle()»? – Dropout

Я предпочитаю держать все анимации и стиль в CSS. Если все, что я делаю с jQuery, это добавление и удаление классов, похоже, что взаимодействия и стили прекрасно разделены. –

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

Пожалуйста, дайте мне знать, если вы застряли на что-нибудь

источник

2014-02-11 09:44:32

Как раздвинуть div по щелчку

ответ

Смежные вопросы