CODEWITHSUNDEEP
jqueryhideshowslidetoggle
user8749260
user8749260

Reputation:

using slidetoggle() to show/hide my div

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.

Upvotes: 2

Views: 9432

Answers (2)

Superslinky
Superslinky

Reputation: 53

You specified ".infor" for the class name in your Javascript but your class is named ".info" in the HTML.

You need to rename it as followed :

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

Upvotes: 0

Master Yoda
Master Yoda

Reputation: 4402

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>

Upvotes: 2

Related Questions