using slidetoggle() to show/hide my div

Question

So I have a button and then a div which contains a div, the div is hidden by default so (display:none, right?).

I want to show and hide the list each time is clicked, I'm using js slidetoggle() but can't get it to work cause I am a complete newbie.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<script>
$(document).ready(function(){
    $("#expand").click(function(){
        $(".infor").slideToggle();
    });
});
</script>

<button id="expand"><h6 style="">Leer más</h6></button>

<div class="info" style="">
   <ul>
     <li>info1</li>
	 <li>info2</li>
	 <li>info3</li>
	 <li>info4</li>
	 <li>info5</li>
   </ul>
</div>

I would love to learn from you guys how to do this, greetings from Spain.

Answer 1

You can use display:none or you can simply hide it on page ready using $(".info").hide();

For the most part your code is fine but you also had a few typos in your code snippet:

$(".infor").slideToggle(); should have been $(".info").slideToggle();

---

Your updated script

$(document).ready(function(){
    
    $(".info").hide();

    $("#expand").click(function(){
        $(".info").slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="expand"><h6 style="">Leer más</h6></button>

<div class="info" style="">
   <ul>
   <li>info1</li>
	 <li>info2</li>
	 <li>info3</li>
	 <li>info4</li>
	 <li>info5</li>
   </ul>
</div>