CODEWITHSUNDEEP
javascriptjqueryhtmlcss
naadyem
naadyem

Reputation: 13

HTML page reloads automatically

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.

Upvotes: 1

Views: 112

Answers (3)

madalinivascu
madalinivascu

Reputation: 32354

delegate your event

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

Upvotes: 1

Bhavana
Bhavana

Reputation: 1054

try this

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

Upvotes: 2

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

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);
           }

Upvotes: 1

Related Questions