HTML page reloads automatically

Question

I have HTML page given below:

 $(document).ready(function() { var showChar = 380; var ellipsestext = "..."; var moretext = "Read more"; var lesstext = "Read less"; var lesshtml=""; var morehtml=""; var content = $(".more").html(); if(content.length > showChar) { var lastChar = content.charAt(showChar); if(lastChar == '/'){ showChar = showChar+1; } var c = content.substr(0, showChar); var h = content.substr(showChar-1, content.length - showChar); var lesshtml = c + '<span class="moreelipses">'+ellipsestext+' <a href="" class="morelink">'+moretext+'</a></span>'; var morehtml = content + '<span><a href="" class="morelink">'+lesstext+'</a></span>'; $(".more").html(lesshtml); } $(".morelink").click(function(){ if ($(this).text()==moretext){ $(".more").html(morehtml); }else{ $(".more").html(lesshtml); } return false; }); }); 

 a { color: #EA7813 } a:visited { color: #EA7813 } a.morelink { text-decoration:none; outline: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="more"> <p>Can't reach the light switch when you walk into a room? Need one added near the door? If you would like to have a switch professionally installed in a location where no switch currently exists, one of our vetted, <strong>local electrical professionals</strong> will take care of your <strong>light switch installation </strong>and make sure it's working smoothly.</p> <p><strong>What's included:</strong></p> <ul> <li>Install one (1) new gang box and associated wiring extension from existing circuit (up to 25')</li> <li>Install and pair one (1) <strong>customer-supplied</strong> smart light switch in a new location <strong>-OR-</strong> provide and install one (1) standard single-pole switch and cover plate</li> <li>Ensure all features are operating to maximum performance</li> <li>Demonstrate basic device features</li> <li>90-day labor warranty</li> </ul> <p><strong>Out of scope:</strong></p> <ul> <li>Smart switch not included, price includes installation only of smart switch -OR- providing and installing a standard switch</li> <li>Requires existing, accessible electrical circuit within 25'</li> <li>Drywall patching &amp; painting</li> <li>Requires existing, compatible network</li> <li>No diagnostic, repair or parts are included with this service</li> <li>No non-stock parts, materials or system repair / upgrades are included with this service</li> </ul> </div> 

What I want is to expand and shrink the body. The expansion works fine but when I shrink, the page reloads. I want to stop the reloading. In my click function, the else part is never fired. Instead, the page reloads. I want to stop reloading and run the code in else so that the body shrinks appropriately.

Answer 1

try this

    $(document).on('click', '.morelink', function(){
      if ($(this).text()==moretext){
        $(".more").html(morehtml);
      } else {
        $(".more").html(lesshtml);
      }
      return false;
    });

Answer 2

delegate your event

 $('body').on('click','.morelink',function(e){
   e.preventDefault();
   //other code 
 });

Answer 3

Instead of having # in href, you can use javascript:; in href which will not let the url change

var lesshtml = c + '<span class="moreelipses">'+ellipsestext+' <a href="javascript:;" class="morelink">'+moretext+'</a></span>';
            var morehtml = content + '<span><a href="javascript:;" class="morelink">'+lesstext+'</a></span>';
            $(".more").html(lesshtml);
           }