On Click only works once

  <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' you put the id of your div, and in the button put:

onclick="mostra('teste')"

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 of the fact that you are using the Bootstrap framework, you can put the hide class in div and use the toggleClass function, eg:

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

Another tip would be to change IDs by Classes in CSS #music1, #music2, #music3 by .music .

CodePen

Why all this? 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><divclass="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>

Would not the toggle suffice?

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

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

In this if you should only have $(this).children().css('display') give a string, 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 what's best.

Something like this:

CSS

.esconde > * {
  display: none;
}

JavaScript

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

example: link

Try:

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