jQuery - Show Less/More, Going up and Down before "Show More" and Vice Versa

Question

can someone help me fix this problem ? I just learn CSS and Js so I dont really know what to do.

this thing going up and down 2x before showing the content, then going up and down again before hide the content.

CSS:

   .pureyad {
        max-width: 600px;
        line-height: 1.1em;
        font-family: 'Roboto Slab';
        overflow: hidden;
        background: #46988f;
        font-size: 14px;
        height: 120px;
        padding-left: 20px
    }

    .purgex {
        display: block;
        background: transparent;
        border: none;
        border-top: 1px solid #222;
        width: 585px;
        max-width: 100%;
        font-family: 'baloo bhai';
        font-size: 15px
    }

JS:

function ssss() {
var text = $('.pureyad'),
     btn = $('.purgex'),
       h = text[0].scrollHeight; 

        if(h > 120) {
        btn.addClass('less');
    }

    btn.click(function(e) 
    {
    e.stopPropagation(); 

    if (btn.hasClass('less')) {
        btn.removeClass('less');
        btn.addClass('more');
        btn.text('Show less');

      text.animate({'height': h});
  } else {
            btn.addClass('less');
            btn.removeClass('more');
            btn.text('Show more');
            text.animate({'height': '120px'});
        }  
    });
}

HTML :

    <div class="pureyad">
<p>Lorem ipsum dolor sit amet..</p>
                </div>
<center><button class="purgex" onclick="ssss()">Show more</button></center>

Gif up and down: http://i.giphy.com/l0HlJmVHLDGnSZWuY.gif

I get this script from reply post here : https://stackoverflow.com/a/38680734/5118751 the script is working fine on Jsfiddle and also when i'm directly load the script on html.

you don't have much content in the html paragraph - show more will not expand as it showing all content.. — Hussain Patel, Sep 28 '16 at 04:50

score 0 · Answer 1 · answered Sep 28 '16 at 04:36

There is no need to add onclick function to your button as you are assigning button class to btn on click function.

var text = $('.pureyad'),
     btn = $('.purgex'),
       h = text[0].scrollHeight; 

if(h > 120) {
 btn.addClass('less');
 btn.css('display', 'block');
}

btn.click(function(e) 
{
  e.stopPropagation();

  if (btn.hasClass('less')) {
      btn.removeClass('less');
      btn.addClass('more');
      btn.text('Show less');

      text.animate({'height': h});
  } else {
      btn.addClass('less');
      btn.removeClass('more');
      btn.text('Show more');
      text.animate({'height': '120px'});
  }  
});

   .pureyad {
        max-width: 600px;
        line-height: 1.1em;
        font-family: 'Roboto Slab';
        overflow: hidden;
        background: #46988f;
        font-size: 14px;
        height: 120px;
        padding-left: 20px
    }

    .purgex {
        display: block;
        background: transparent;
        border: none;
        border-top: 1px solid #222;
        width: 585px;
        max-width: 100%;
        font-family: 'baloo bhai';
        font-size: 15px
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pureyad">
<p>Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet..</p>
                </div>
<center><button class="purgex">Show more</button></center>

I dont know what wrong, its still not working .. I put directly on HTML page it's working.. but if I load from wp_equeue its not working again .. — lllkyo, Sep 28 '16 at 08:44

score 0 · Accepted Answer · answered Sep 28 '16 at 04:46

First things first - you are facing this problem because you don't have much content in the html.. so show more will not expand. as its showing all the content.
secondly - you are mixing JavaScript and jQuery together.. when you are using jQuery to get the button class why do you need onclick=ssss() I have made changes see below code snippet - and its working for me..

$(document).ready(function(){
var text = $('.pureyad'),
     btn = $('.purgex'),
       h = text[0].scrollHeight; 

        if(h > 120) {
        btn.addClass('less');
    }
    btn.click(function(e) 
    {
    e.stopPropagation(); 

    if (btn.hasClass('less')) {
        btn.removeClass('less');
        btn.addClass('more');
        btn.text('Show less');

      text.animate({'height': h});
  } else {
            btn.addClass('less');
            btn.removeClass('more');
            btn.text('Show more');
            text.animate({'height': '120px'});
        }  
    });

});

 .pureyad {
        max-width: 600px;
        line-height: 1.1em;
        font-family: 'Roboto Slab';
        overflow: hidden;
        background: #46988f;
        font-size: 14px;
        height: 120px;
        padding-left: 20px
    }

    .purgex {
        display: block;
        background: transparent;
        border: none;
        border-top: 1px solid #222;
        width: 585px;
        max-width: 100%;
        font-family: 'baloo bhai';
        font-size: 15px
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pureyad">
<p>Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
   fdfsdfdsfd
Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
    fdfsdfdsfd
Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
    fdfsdfdsfd
Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
fdfsdfdsfd
Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
df
ds
fsdfsdfdsfds

fsdf
f

fdfsdfdsfd
Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
df
ds
fsdfsdfdsfds

fsdf
f

fdfsdfdsfd
Lorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
df
ds
fsdfsdfdsfds fsdf
f
fdfsdfdsfdLorem ipsum dolor sit amet..dfdffsdfdf
dsfdsfdsfsdfdsf
fsdfsdfdsfsdfdfdsf
df
ds
fsdfsdfdsfds

fsdf
f

fdfsdfdsfd
ds
fsdfsdfdsfds

fsdf
f

fdfsdfdsfd
</p>
                </div>
<center><button class="purgex">Show more</button></center>

Hope this helps. Mark this as nswered , if your issue is fixed.

I dont know what wrong, its still not working .. I put directly on HTML page it's working.. but if I load from wp_equeue its not working again .. — lllkyo, Sep 28 '16 at 08:46

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

Thanks you, sir. I just reading post from HussainPatel that I mixing jQuery and Javascript, I start googling how to load jQuery and found this post https://stackoverflow.com/a/22239396/5118751.

my big mistake is I do not put array(jQuery) when load. :( ... now everything is working fine.

Big Thanks to you.

edited May 23 '17 at 12:15

Community

1
1

answered Sep 28 '16 at 08:56

lllkyo

3
2
4

jQuery - Show Less/More, Going up and Down before "Show More" and Vice Versa

3 Answers3