Css Expand/hide Div

[Lau_1]

Hello, i had some problem with the below code. How to change the 'Click to Read More' and 'Click to Hide' function by just click 'Step' to show and hide?

page.php

        <blockquote class="bigtext">
            <p class="title"><b>Step 1</b><hr class="style1"></p>
            <p></p>
            <p></p>   
        </blockquote>

javascript

<script>
$(function(){
  var animspeed = 950; // animation speed in milliseconds

  var $blockquote = $('.bigtext');
  var height = $blockquote.height();
  var mini = $('.bigtext p').eq(0).height();

  $blockquote.attr('data-fullheight',height+'px');
  $blockquote.attr('data-miniheight',mini+'px');
  $blockquote.css('height',mini+'px');


  $('.expand').on('click', function(e){
    $text = $(this).prev();

    $text.animate({
      'height': $text.attr('data-fullheight')
    }, animspeed);
    $(this).next('.contract').removeClass('hide');
    $(this).addClass('hide');
  });

  $('.contract').on('click', function(e){
    $text = $(this).prev().prev();

    $text.animate({
      'height': $text.attr('data-miniheight')
    }, animspeed);
    $(this).prev('.expand').removeClass('hide');
    $(this).addClass('hide');
  });
});
</script>    

test.css

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

hr.style1 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

p {
  display: block;
  font-size: 0.85em !important;
  line-height: 1.3em;
  margin-bottom: 22px;
}

.title{
    color:#424242;
    font-size: 1.5em !important;
}

/** page structure **/
#wrapper {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}

#photo {
  display: block;
  text-align: center;
  margin-bottom: 20px;
}
#photo img {
  width: 250px;
  height: 250px;
  border-radius: 125px;
  border: 5px solid #fff;
  box-shadow: 2px 0 7px #aaa;
}

.bigtext {
  display: block;
  overflow: hidden;
  color: #787878;
}

.expand, .contract {
  cursor: pointer;
  font-weight: bold;
  padding: 15px 0;
  text-align: center;
  color: #555;
}
.expand:hover, .contract:hover {
  color: #121212;
}

.hide {
  display: none;
}

[Lau_1]

Update *Forget to put these two button

<blockquote class="bigtext">
    <p class="title"><b>Step 1</b><hr class="style1"/></p>
            <p></p>
            <p></p>   
</blockquote>

<p class="expand"><i class="fa fa-arrow-down"></i> Click to Read More <i class="fa fa-arrow-down"></i></p>
<p class="contract hide"><i class="fa fa-arrow-up"></i> Click to Hide <i class="fa fa-arrow-up"></i></p>

[diafol]

http://jsfiddle.net/diafol666/ocbdampz/

Seemed to work OK for me. Was it something else?

[Lau_1]

Thanks for your reply, @diafol.

My problrm is, how to open the paragraph by clicking the

<p class="title"><b>Step 1</b><hr class="style1"></p>

instead of these two butoon

<p class="expand"><i class="fa fa-arrow-down"></i> Click to Read More <i class="fa fa-arrow-down"></i></p>
<p class="contract hide"><i class="fa fa-arrow-up"></i> Click to Hide <i class="fa fa-arrow-up"></i></p>

I tried several time, but no result come out. :(

[diafol]

Well you attach an event listener to the .title:

I'm assuming that you want to show the paragraphs below the title on click? Do you want toggel show/hide or just open?

$('.title').click(function()
{
    $('.bigtext p').show();
});

That's a bit mucky and not tested, but you can target specific paragraphs within .bigtext (div.bigtext p:nth-child(n+1)) or paragraphs following the event initiator (.title), with DOM traversal, e.g. next().