CodePen

HTML

            
              <div class="outer">
  <h1>Please click me</h1>
  
  <div class="inner">
    <p>This is some text</p>
  </div><!-- .inner -->
</div><!-- .outer -->
            
          
!

CSS

            
              .outer { width: 300px; margin: 25px auto; text-align: center; }

.inner { display: none; background-color: red; padding: 10%; }
.inner p { display: none; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.outer h1').on("click", function() {
  $('.inner').slideToggle( 1000, function() {
    $('.inner p').show( 100 );
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................