Home/ Questions/Q 7090149
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T08:00:38+00:00

Please see my code below… I am puzzled and want to initially show 30px

  • 0

Please see my code below…

I am puzzled and want to initially show 30px (in height) of the below div. At present I can only toggle to show or hide.

What I actually want is to show the first 30px and toggle/show anything contained below that.

<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<script type="text/javascript">
  $(document).ready(function() {
  // Hide the "view" div.
  $('div.view').hide();
  // Watch for clicks on the "slide" link.
  $('div.slide').click(function() {
  // When clicked, toggle the "view" div.
  $('div.view').slideToggle(400);
  return false;
});
});
</script>
</head>
<body>
<div class="view">
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
</div>
<div class="slide" style="cursor: pointer;">Show/Hide</div>
</body>
</html>

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this

    Add this css

    .view{
    overflow:hidden;
    height: 30px;
}

    JS

    $(document).ready(function() {
    var $divView = $('div.view');
    var innerHeight = $divView.removeClass('view').height();
    $divView.addClass('view');

    $('div.slide').click(function() {
        $('div.view').animate({
          height: (($divView.height() == 30)? innerHeight  : "30px")
        }, 500);
        return false;
    });
});

    Demo

    • 0