On Click only works once

Question

I have the following code to show and hide content, but it only works once. When I click again to hide, nothing happens.

$(document).ready(function() {
    $('li[name=music]').off().on('click', function() {
        if ($(this).children().css('display', 'none')) {
            $(this).children().css('display', 'block');
        } else {
            $(this).children().css('display', 'none');
        };
    });
});

http://codepen.io/evemontalvao/pen/PZPpgM

Answer 1

  <script type="text/javascript">

        function mostra() {
            if (document.getElementById('teste').style.display == 'block'){
                document.getElementById('teste').style.display = 'none';
            }else {document.getElementById('teste').style.display = 'block'}
        }

    </script>

In 'test' Voce puts the id of your div , and the boot puts :

onclick="mostra('teste')"

Answer 2

By analyzing your HTML code, you can simply do:

$('li[name=music]').on('click', function () {
  $el = $(this).children('div');
  /*
  * Desta forma vc verifica se a div está visível
  * ao invés de if($(this).children().css('display','none'))
  * que sempre retornará verdadeiro
  */
  if($el.is(':visible')){ 
    $el.css('display','none');
  } else {
    $el.css('display','block');
  }
});

Another suggestion, taking advantage that you are using the Bootstrap framework, you can put the class hide in div and use the function toggleClass, example:

$('li[name=music]').on('click', function () {
  $(this).children('div').toggleClass('hide');
});

Another tip would be to exchange ID for Classes in CSS #music1, #music2, #music3 for .music.

Codepen

Answer 3

What’s all this for? use toggle()!

$('li[name=music]').click(function() {
  $(this).find('div').toggle();
});

#music1,
#music2,
#music3 {
  display: none;
  text-align: center;
  padding: 1%;
  text-transform: none;
  color: #bb5d6a;
}
ul.nav-pills li {
  background-color: #faf7ea;
  text-transform: uppercase;
}
ul.nav-pills li a {
  color: #bb5d6a;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 1.5em;
  border-bottom: 1px solid #fff;
}
.icon::before {
  display: inline-block;
  margin-right: .5em;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="col-md-4">
  <ul class="nav nav-pills nav-stacked">
    <li role="presentation" name="music"><a class="icon fa-play-circle-o" href="#musicas"> Lorem Ipsum</a>
      <div id="music1" name="mostra">

        teste
      </div>
    </li>
    <li role="presentation" name="music"><a class="icon fa-play-circle-o" href="#musicas"> Lorem Ipsum</a>
      <div id="music2">

        teste
      </div>
    </li>
    <li role="presentation" name="music"><a class="icon fa-play-circle-o" href="#musicas"> Lorem Ipsum</a>
      <div id="music3">
        teste
      </div>
    </li>
  </ul>
</div>

Answer 4

the toggle would not be enough?

$(document).ready(function () {
    $('li[name=music]').off().on('click', function () {
        $(this).toggle();
    }
}

Answer 5

In this line if ($(this).children().css('display', 'none')) { this check will always be true. That’s because this jQuery method returns the object itself, and objects when converted to booleans give true.

In that if you should only have $(this).children().css('display') will give a string, and then compare with block for example...

If you want to hide and show the descending elements you can simplify the code. You can mix CSS into that which is best.

Something like that:

CSS

.esconde > * {
  display: none;
}

Javascript

$('li[name=music]').on('click', function () {
  this.classList.toggle('esconde');
});

example: http://codepen.io/anon/pen/VevoOG

Answer 6

Try:

$(document).ready(function() {
  $('li[name=music] a').on('click', function () {
    $(this).next().toggle(); 
  });
});