I wants to add read more button to the content in HTML and when click that button it should display hidden div and display none the read more button. I did it, but now i wants to do that smoothly. i want to add time delay to that hidden div when display.

This is my HTML code.

<div class="col-md-12">
    <h3>nhlkhlhlib;b</h3>
    <p>hjglhvlgugyjlbljg</p>
</div>
<div class="col-md-12 add-margin-bottom">
    <div class="col-md-12">
       <button class="btn-read-more" id="read-one">READ MORE</button>
    </div>
    <div class="col-md-12 no-padding" id="para-one">
       <p>hgkjhfkuyfkvkkviyftyff</p>
    </div>
</div>

when click the id=read-one button. it display the id="para-one".

this is the java script i used.

$( '.btn-read-more' ).click(function() {
        var id = $(this).attr('id');
            if(id=="read-one"){
            $("#read-one").css("display","none");
            $("#para-one").css("display","block");
            });
});

so i want to add time delay to this click action.

Can anyone help me?

I wants to add read more button to the content in HTML and when click that button it should display hidden div and display none the read more button. I did it, but now i wants to do that smoothly. i want to add time delay to that hidden div when display.

This is my HTML code.

<div class="col-md-12">
    <h3>nhlkhlhlib;b</h3>
    <p>hjglhvlgugyjlbljg</p>
</div>
<div class="col-md-12 add-margin-bottom">
    <div class="col-md-12">
       <button class="btn-read-more" id="read-one">READ MORE</button>
    </div>
    <div class="col-md-12 no-padding" id="para-one">
       <p>hgkjhfkuyfkvkkviyftyff</p>
    </div>
</div>

when click the id=read-one button. it display the id="para-one".

this is the java script i used.

$( '.btn-read-more' ).click(function() {
        var id = $(this).attr('id');
            if(id=="read-one"){
            $("#read-one").css("display","none");
            $("#para-one").css("display","block");
            });
});

so i want to add time delay to this click action.

Can anyone help me?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Apr 21, 2015 at 8:15 anuruddhikaanuruddhika 1,55988 gold badges2626 silver badges4141 bronze badges 3

• setTimeout? developer.mozilla/en-US/docs/Web/API/WindowTimers/… Do you need a simple delay or a smarter animation? – briosheje Commented Apr 21, 2015 at 8:19
• 1 Do you want a time delay, or a smooth-looking transition while the additional information shows? If it's the latter, then I'd remend looking into CSS transitions. A timer won't prevent it from suddenly jolting into view. – Adam Kewley Commented Apr 21, 2015 at 8:23
• Look at fadeIn and fadeOut – Thomas Lielacher Commented Apr 21, 2015 at 8:23

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

How about a pure CSS solution?*

The core thing here is that you cannot transition/animate on display as it is a binary/non ordinal property. You will need to transition on either height, or max-height. The reason being in e.g. your use-case, display is either none or block, what would the intermediary values be? As height and max-height are unit based values, intermediary values can be calculated as a function of amount over time.

Although this can be acplished in javascript, writing the style change within CSS keeps the strict separation of concerns between content (HTML), function (JS) and style (CSS). Although a pure CSS solution is likely not appropriate, it gives you an idea of how this can be done. In your javascript, instead of defining the transition/style, you can then simply toggle a class on the element in question, *see the second example below for a javascript implementation.

input[type=checkbox] {
  display: none;
}
p {
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition: max-height 300ms, opacity 200ms;
}
input[type=checkbox]:checked + p {
  max-height: 150px;
  opacity: 1;
}

<div>
  <label for="read-more">READ MORE</label>
  <input id="read-more" type='checkbox' />
  <p>some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />
  </p>
</div>

Javascript Alternative

$('button').on('click', function() {
  $('p').toggleClass('expand');
});

    p {

      overflow: hidden;

      opacity: 0;

      max-height: 0;

      transition: max-height 300ms, opacity 200ms;

    }

    p.expand {

      max-height: 150px;

      opacity: 1;

    }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button>READ MORE</button>
  <p>some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />some text content
    <br />
  </p>
</div>

Hi i have do it simple and smoothly with fadeIn() and fadeOut() you can try the snippet code check it out

$("#para-one").hide();
$( '.btn-read-more' ).click(function() {
        var id = $(this).attr('id');
        if(id=="read-one"){
            $("#read-one").fadeOut("fast",function(){
            $("#para-one").delay(300).fadeIn("fast");
            });
};
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
    <h3>nhlkhlhlib;b</h3>
    <p>hjglhvlgugyjlbljg</p>
</div>
<div class="col-md-12 add-margin-bottom">
    <div class="col-md-12">
       <button class="btn-read-more" id="read-one">READ MORE</button>
    </div>
    <div class="col-md-12 no-padding" id="para-one">
        <p>hgkjhfkuyfkvkkviyftygfgf<br>sdvdvdvsdvff<br>fdfdfdfdfdf</p>
    </div>
</div>

You can use .fadeIn and .fadeOut with .delay of jquery:

$('.btn-read-more').click(function() {
var id = $(this).attr('id');
if (id=="read-one"){
    $("#read-one").fadeOut('fast');
    $("#para-one").delay(2000).fadeIn('slow');
}

});

See the fiddle https://jsfiddle/bm0yv8o3/

who gave this answer? it works correctly. Unfortunately he removed his answer. Anyway thanks a lot who try to help me.

$( '.btn-read-more' ).click(function() {
        var id = $(this).attr('id');
            if(id=="read-one") {
                $("#read-one").hide(300, function () {
                    $("#para-one").show(300);
                });
         }
    });

this is the link