Как скрыть div, когда я нажимаю на него

Question

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

Я также создал пример кода, где вы можете видеть, что я сделал до сих пор. Нажмите на синий div, он должен открыть скрытый абзац.

<http://codepen.io/anon/pen/qbMBXd> 

[Отредактировано: Кроме того, когда вкладка открыта и я нажимаю на другой, закладка первой должна быть закрыта, как и все остальные, кроме открытого в данный момент один]

Answer 1

изменить JavaScript, чтобы выглядеть следующим образом

function changeSize(x){ 
    var div = document.getElementById(x); 
    if (div.style.height == "50px"){ 
     switch (div.id){ 
     case("box1"): 
      div.style.height = "auto"; 
      document.getElementById("box2").style.height = "50px"; 
      document.getElementById("box3").style.height = "50px"; 
      document.getElementById("box4").style.height = "50px"; 
      document.getElementById("box5").style.height = "50px"; 
      break; 
     case ("box2"): 
      div.style.height = "auto"; 
      document.getElementById("box1").style.height = "50px"; 
      document.getElementById("box3").style.height = "50px"; 
      document.getElementById("box4").style.height = "50px"; 
      document.getElementById("box5").style.height = "50px"; 
      break; 
     case ("box3"): 
      div.style.height = "auto"; 
      document.getElementById("box1").style.height = "50px"; 
      document.getElementById("box2").style.height = "50px"; 
      document.getElementById("box4").style.height = "50px"; 
      document.getElementById("box5").style.height = "50px"; 
      break; 
     case ("box4"): 
      div.style.height = "auto"; 
      document.getElementById("box1").style.height = "50px"; 
      document.getElementById("box3").style.height = "50px"; 
      document.getElementById("box2").style.height = "50px"; 
      document.getElementById("box5").style.height = "50px"; 
      break; 
     case ("box5"): 
      div.style.height = "auto"; 
      document.getElementById("box1").style.height = "50px"; 
      document.getElementById("box3").style.height = "50px"; 
      document.getElementById("box4").style.height = "50px"; 
      document.getElementById("box2").style.height = "50px"; 
      break; 


     } 
    } else { 
    div.style.height = "50px"; 
    } 
    } 

некрасивым, но это делает работу.

вы можете вызвать функцию из вашего HTML каждый раз, когда ДИВ щелкают

<div class="colorbox" id="box1" onclick="changeSize('box1')"> 

Успехов

Answer 2

Я думаю, вам нужно прочитать о JavaScript & JQuery, чтобы заставить это работать.

У вас есть функция, которая дает вам возможность изменять CSS при возникновении события. Например, вот так.

document.getElementById(target).style.display = 'none'; 

Другая функция позволяет реагировать на щелчок!

Вы можете посмотреть с Условным оператором, если дисплей равно none, а затем изменить его block или то, что вы предпочитаете, и если оно не равно изменить его none.

Надежда я мог бы помочь :)

Greats,

Traxstar!

Answer 3

Итак, есть много способов сделать это. Следуя вашему примеру в кодефене, вам не понравится?

var colorvar = document.getElementById('box1'); 
    colorvar.addEventListener("click", function() { 
     if (document.getElementById("box1").style.height == "auto") { 
     document.getElementById("box1").style.height = document.getElementById("box1").style.height = "50px"; 
     } else { 
     document.getElementById("box1").style.height = document.getElementById("box1").style.height = "auto"; 
     } 
    }); 

Answer 4

Попробуйте это ... :)

.collapse > * + *{ 
 
    display:none; 
 
} 
 
.collapse > *{ 
 
    cursor:pointer; 
 
} 
 
.collapse:focus{ 
 
    outline:none; 
 
} 
 
.collapse:focus > * + *{ 
 
    display:block; 
 
}

<div class="collapse" tabindex="1"> 
 
    <h2>Boxinum</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
</div> 
 
<div class="collapse" tabindex="1"> 
 
    <h2>Boxinum</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. 
 
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet 
 
    sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
</div> 
 
<div class="collapse" tabindex="1"> 
 
    <h2>Boxinum</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. 
 
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet 
 
    sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
</div> 
 
<div class="collapse" tabindex="1"> 
 
    <h2>Boxinum</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. 
 
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet 
 
    sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
</div> 
 
<div class="collapse" tabindex="1"> 
 
    <h2>Boxinum</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. 
 
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet 
 
    sodales nunc dolor semper lacus. Vivamus egestas lectus id imperdiet pharetra. Nulla non sem elit. Fusce porta velit leo, nec gravida ligula auctor vitae. Sed justo sem, sodales ut imperdiet at, fringilla pharetra neque.</p> 
 
</div>

Answer 5

Этот мой второй пост, проверьте полезно .. :)

$('div.accordion-body').on('shown', function() { 
 
    $(this).parent("div"); 
 

 
}); 
 

 
$('div.accordion-body').on('hidden', function() { 
 
    $(this).parent("div"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="accordion-group"> 
 
     <div class="accordion-heading"> \t <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai"> 
 
\t \t \t \t \t \t \t <span class="pull-right"></span> 
 
\t \t \t \t \t \t \t \t \t Boxinum 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
     <div id="jai" class="accordion-body collapse in"> 
 
      <div> 
 
       <div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu. 
 
    Aliquam aliquet orci et sapien euismod, vitae pellentesque velit porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin rhoncus, felis non elementum ultrices, dui nisl tincidunt risus, sit amet 
 
    sodales nunc dolor semper lacus.</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="accordion-group"> 
 
     <div class="accordion-heading"> \t <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
 
\t \t \t \t \t \t \t <span class="pull-right"></span> 
 
\t \t \t \t \t \t \t \t \t Boxinum 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
     <div id="collapseTwo" class="accordion-body collapse"> 
 
      <div> 
 
       <div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt ultrices arcu, ut pulvinar risus maximus sed. Quisque dolor nisl, iaculis id sem eget, molestie mollis est. Phasellus scelerisque sagittis ex, nec vestibulum turpis euismod eu.</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="accordion-group"> 
 
     <div class="accordion-heading"> \t <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3"> 
 
\t \t \t \t \t \t \t <span class="pull-right"></span> 
 
\t \t \t \t \t \t \t \t \t Boxinum 
 
\t \t \t \t \t \t \t </a> 
 

 
     </div> 
 
     <div id="collapse3" class="accordion-body collapse"> 
 
      <div> 
 
       <div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>