.toggle не показывает уже скрытый div, но скрывает отображаемый. Зачем?

Question

Я пытаюсь сделать скрытый показ div при переключении, но мне не повезло. Обратное работает (если я поставлю display: inline, он будет скрыт, когда я нажму кнопку). Я новичок в JQuery, так что могу делать что-то очень не так. Вот код:

<style>

.boxx {display: none;}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ggg").toggle(300);
  });
});
</script>

<center>

<button>click here</button><br>
<ggg>
<div class="boxx">show this text</div>
</ggg>

Заранее спасибо!

Answer 1

Вместо этого вам нужно переключить класс .boxx.

$(document).ready(function(){
  $("button").click(function(){
    $(".boxx").toggle(300);
  });
});