ugrás a tartalomhoz

JavaScript hide and show div probléma

tumskin · 2014. Jún. 22. (V), 14.15

<head>  
  <meta charset="utf-8">  
  <title>Hide and show</title>  
  <style>  
    
.text_container {  
  text-align: left;  
  width: 500px;  
  color: #000;  
  background-color: #ddd;  
  border: solid 1px #777;  
  margin: 0 auto 10px;  
  padding: 10px;  
  cursor: pointer  
}  
.text_container div p {  
  cursor: default !important;  
  margin-bottom: 10px  
}  
.visible>div {  
  display: block;  
  font-size: 17px;  
}  
form,  
.subscribe:hover>div,  
.hidden>div {  
  display: none  
}  
</style>  
</head>  
  
<body>  
  
    <div class="text_container">  
      <h2>Doboz</h2>  
      <div>  
        <p><a href="http://www.weblabor.hu" target="_blank">Home</a>   Leírás  </p>
      </div>  
    </div>  
  
  
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>  
  <script type="text/javascript">  
    $(document).ready(function(){  
      $('.text_container').addClass("hidden");  
  
      $('.text_container').click(function() {  
        var $this = $(this);  
        if ($this.hasClass("hidden")) {  
          $(this).removeClass("hidden").addClass("visible");  
        } else {  
          $(this).removeClass("visible").addClass("hidden");  
        }  
      });  
    });  
  </script>  
</body>  
</html>
Azt szeretném elérni, hogy ha a Doboz szövegre kattintok akkor nyissa ki és csukja be a box-ot! Remélem tud nekem valaki ebben segíteni! Mert jelenleg ha egy linket helyezek el benn akkor automatikusan becsukja! Köszi!
‹ Node app futtatása Grunt - al Javascript nem kapja meg a változó értékét amit PHP form-al küldök ›
 ■
1

Nem biztos, hogy szép, de

asam9 · 2014. Jún. 22. (V), 14.46
Nem biztos, hogy szép, de valami ilyesmi:
$(document).ready(function () {
    var $tc = $('.text_container');
    $tc.addClass('hidden');
    $tc.on('click', function (e) {
        if ($(e.target).closest('a').length === 0) {
            $tc.toggleClass('hidden');
        }
    });
});
Még esetleg azon spórolhatsz, hogy nem JS-sel adod rá a hidden class-t, hanem a HTML-be írod bele: <div class="text_container hidden"> ...
2

Pazar

tumskin · 2014. Jún. 22. (V), 14.55
Tökéletes nagyszerűen működik, köszönöm!
3

Mégse

tumskin · 2014. Jún. 22. (V), 15.27
Sajna nem jó mert így ha duplikálok egy új div-et akkor mindkettőt kinyitja és bezárja :(
4

Ha több elemre is akarod

asam9 · 2014. Jún. 22. (V), 18.49
Ha több elemre is akarod alkalmazni ezt, akkor viszont maradjon a this:
$(this).toggleClass('hidden');
5

Javascript alapok HTML

Hidvégi Gábor · 2014. Jún. 22. (V), 19.49
Javascript alapok
HTML alapok
CSS alapok
jquery alapok
6

google ?

tumskin · 2014. Jún. 23. (H), 16.21
$(document).ready(function(){
$('.text_container').addClass("hidden");

$(document).on('click', '.text_container h2', function() {
var $this = $(this).closest('.text_container');
if ($this.hasClass("hidden")) {
$this.removeClass("hidden").addClass("visible");
} else {
$this.removeClass("visible").addClass("hidden");
}
});
});


ezt kellett volna bemásolnod, nem a google keresőt ! de köszi