jquery — Have collapsing div start collapsed

I have a collapsing div that works perfectly fine but it starts expanded.



How can I get the div to start collapsed?



Also, how can I get the "Learn More" button to change its text to "Hide" when the div has been expanded?





$(function(){

    $('a.togglebtn').click(function(){

        $('#myContent3').stop().slideToggle(500);

        return false;

    });

});

<div>

<a class="lead p-color learn-button togglebtn">

  <small>

    <span class="glyphicon glyphicon-plus">

    </span> Learn More

  </small>

</a>

</div>



<div id="myContent" class="row row-offset" style="margin: 0 30px">

  <div class="col-xs-6 col-md-4">

    <div class="lead caption text-center">

      <h3 class="h-color">Profile</h3>

    </div>

    <div class="thumbnail">

      <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Thumbnail">

    </div>

    <div class="lead caption">

      <p class="p-color"><small>Some sample text. Some sample text.</small></p>

    </div>

  </div>

</div>

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


Answers

Slightly changed your code. Try this.



<div>

<a class="lead p-color learn-button togglebtn">

  <small>

    <span class="glyphicon glyphicon-plus">

      </span> <span id="toggleText">Learn More</span>

  </small>

</a>

</div>



<div id="myContent" class="row row-offset" style="margin: 0 30px">

  <div class="col-xs-6 col-md-4">

    <div class="lead caption text-center">

      <h3 class="h-color">Profile</h3>

    </div>

    <div class="thumbnail">

      <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Thumbnail">

    </div>

    <div class="lead caption">

      <p class="p-color"><small>Some sample text. Some sample text.</small></p>

    </div>

  </div>

</div>





$(function(){

    $('a.togglebtn').click(function(){

        if($("#toggleText").text()=="Learn More"){

            $("#toggleText").html("Hide")}

        else {$("#toggleText").html("Learn More")}

        $('#myContent').stop().slideToggle(500);

        return false;

    });

});





#myContent{display:none;}


Hope this is the one you have expected.



Answers

you need to do this:



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Collapsible Div</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

<body>

<div>

<a class="lead p-color learn-button togglebtn" data-toggle="collapse" data-target="#myContent">

  <small>

    <span class="glyphicon glyphicon-plus">

    </span> Learn More

  </small>

</a>

</div>



<div id="myContent" class="row row-offset collapse" style="margin: 0 30px">

  <div class="col-xs-6 col-md-4">

    <div class="lead caption text-center">

      <h3 class="h-color">Profile</h3>

    </div>

    <div class="thumbnail">

      <img style="height: 100px; width: auto;" class="img-circle" src="http://placehold.it/100x150" alt="Thumbnail">

    </div>

    <div class="lead caption">

      <p class="p-color"><small>Some sample text. Some sample text.</small></p>

    </div>

  </div>

</div>

</body>

</html>


Just add data-toggle="collapse" and a data-target to element <a> The data-target attribute takes your usual css selectors (id, class, name etc). The .collapse is set to "" which starts collapsed.



Check here for more info: w3schools