1

Here is my code: https://jsfiddle.net/ucffyp3v/43/

As stated, I would like to only show 50px in height of this div and show the rest once show more is clicked.

The js does not seem to be working to display the rest of the div.

$("document").ready(function(){
$(".show-more").click(function(){
if($(".mydiv").css("height")!="50px"){
  $(".mydiv").slideDown();
}
else{
  $(".mydiv").slideUp();
}
}
}
Mike L
  • 39
  • 7

5 Answers5

1

This is maybe you are looking for: working link 

$( "document" ).ready(function() {
  $(".show-more").click(function(){
    if($(".mydiv").css("height") === "50px"){
      $(".mydiv").css("height", 'auto');
      $(".mydiv").slideDown();
    }
    else{
      $(".mydiv").css("height", '50px');
      $(".mydiv").slideUp();
    }
  });
});

But I suggest you can move <h2>Hello</h2> to make the scroll go smoothly.

Tan Duong
  • 2,124
  • 1
  • 11
  • 17
  • Thank you so much, seriously you are a lifesaver! – Mike L Apr 02 '18 at 03:06
  • Is it possible to make "show more" switch to "show less" when the div is expanded and switch back to "show more" when collapsed? – Mike L Apr 02 '18 at 03:39
  • Yes. You can use `$(".show-more").html('show less');`. Check the fiddle https://jsfiddle.net/ucffyp3v/98/ – Tan Duong Apr 02 '18 at 03:44
  • Thanks so much :) I know I've already asked too much. But is there a way to make the text fade away at the end of the collapsed div only? And show normally with no fading when expanded? – Mike L Apr 02 '18 at 04:07
  • Great! If you want to make effect. You can use jquery fadeIn(300), fadeOut(300) instead of show(), hide().https://www.w3schools.com/jquery/jquery_fade.asp – Tan Duong Apr 02 '18 at 04:25
  • You really helped me out tonight and it means a lot. – Mike L Apr 02 '18 at 05:51
0

You have syntax error for start. It seems to be working.

https://jsfiddle.net/3kor5bup/2/a

$("document").ready(function() {
  $(".show-more").click(function() {
    if ($(".mydiv").css("height") != "50px") {
      $(".mydiv").slideDown();
    } else {
      $(".mydiv").slideUp();
    }
  });
});
Sebin Benjamin
  • 1,758
  • 2
  • 21
  • 45
0

Syntax error : Working Example

$("document").ready(function(){
  $(".show-more").click(function(){
    if($(".mydiv").css("height")!="50px"){
      $(".mydiv").slideDown();
    }
    else{
      $(".mydiv").slideUp();
    }
  });
});

And i think you are looking for onchange,slideToggle function.

Minar Mnr
  • 1,376
  • 1
  • 16
  • 23
0

Maybe you would like to check this question here: jQuery Toggle Text?

There are a few nice examples there of what you are trying to achieve, like this fiddle here by the user @firstandlastpost:

https://jsfiddle.net/b5u14L5o/

jQuery.fn.extend({
    toggleText: function(stateOne, stateTwo) {
        return this.each(function() {
            stateTwo = stateTwo || '';
            console.log(stateOne, stateTwo, $(this).text());
            $(this).text() !== stateTwo  && stateOne
            ? $(this).text(stateTwo)
            : $(this).text(stateOne);
        });  
    }
});

$('button').on('click', function() {
    $(this).toggleText('Show it!', 'Hide it!').next().toggle();
});

For your example, I adapted to this: https://jsfiddle.net/ucffyp3v/87/

caiolopes
  • 561
  • 8
  • 14
0

You can use slideToggle function, see this working sample:

https://jsfiddle.net/g0jy9Lhm/

$(document).ready(function(){
  $(".show-more").click(function(){
    $(".mydiv").slideToggle("slow");
  });
});
Raj Kumar N
  • 783
  • 6
  • 22