Javascript Развернуть/Свернуть

Я совершенно не знаком с Javascript. Я пытался понять это, но не могу показаться. Итак, мой вопрос ...Javascript Развернуть/Свернуть

Что мне нужно сделать в коде, чтобы при открытии «одного» и когда вы нажимаете «два», содержимое ниже «один» рушится?

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="utf-8"> 
<title>Help!</title> 

</head> 
<body> 

<div> 
<a href="#" id="1" class="title" name="1">one</a> 
</div> 
<div id="workdiv1" class="workdiv" style="display:none">content 1 
</div> 
</div> 

<div class="storybottom"> 
<a href="#" id="2" class="title" name="2">two</a> 
</div> 
<div id="workdiv2" class="workdiv" style="display:none">content 2 
</div> 
</div> 

<div class="storybottom"> 
<a href="#" id="3" class="title" name="3">three</a> 
</div> 
<div id="workdiv3" class="workdiv" style="display:none">content 3 
</div> 
</div> 

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('#work').hide(); 

     $('a.title').click(function() { 
      var id = $(this).attr('id'); 
      $('#workdiv' + id).toggle(150); 
      return false; 
     }); 
    }); 
</script> 
</body> 
</html>

источник

2012-05-23 davidgogh

скрипку для вас: http://jsfiddle.net/jbabey/kSQfy/ – jbabey

также заглянуть в Jquery UI, вы можете использовать аккордеон для этого. – deltree

$('a.title').click(function(){ 
     var target = $(this).closest('div').next('div'); 
     var mode = target.is(':visible'); 
     target.siblings('div.workdiv').hide(); 
     if(!mode) target.show(); else target.hide(); 
});

Как это?

источник

2012-05-23 20:27:50

Хмм, похоже, не закрывает те, которые были ранее открытыми. Моя цель - иметь эту систему, в которой содержимое расширяется и сворачивается с анимацией, а также когда что-то другое выбирается, предыдущий контент рушится. Как аккордеон! – davidgogh

@ user1413528 Обновлено. Вы можете добавить свои настройки анимации в функции 'hide()/show()'. –

Привет grigore, в первую очередь спасибо много! я написал внизу, но можно ли вставить код, чтобы при нажатии на один и тот же «заголовок» он закрывается? например когда «один» открыт и снова нажимает на него, он рушится ..? – davidgogh

http://jsfiddle.net/jbabey/kSQfy/1/

$(document).ready(function() { 
    $('a.title').click(function() { 
     var correspondingDiv = $(this).parent().next('div'); 

     if (!correspondingDiv.is(':hidden')) { 
      return; 
     } 

     // hide other divs 
     $('.workdiv').hide(150); 

     // show this one 
     correspondingDiv.toggle(150); 
    }); 
});

источник

2012-05-23 20:33:18 jbabey

Привет, jbabey, это выглядит очень близко, но можно ли внедрить код, чтобы при нажатии на один и тот же заголовок он закрывается? например когда «один» открыт и снова нажимает на него, он рушится ..? – davidgogh

@ davidgogh все, что вам нужно сделать, это уже есть, мы здесь не для того, чтобы сделать для вас работу;) – jbabey

Javascript Развернуть/Свернуть

ответ

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