Home/ Questions/Q 267093
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T23:29:51+00:00

I have the following script which first shows only the first para of the

  • 0

I have the following script which first shows only the first para of the page to a user. When the user clicks on ‘Shw More’, the rest of the content is displayed. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
     <script language="javascript" type="text/javascript">
         $(function() {
             $("#someDiv p:not(:first)").hide();
             $("#someDiv p:first").after('<a id="show" href="#">Show more</a>');

             $("#show").click(function(evt) {
                 evt.preventDefault();
                 //window.location.reload(true);
                 $(this).hide();

                 $("#someDiv p").show();
             });

         });
</script>
</head>
<body>
<div id="someDiv">
<p>LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
</p>
<p>LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
</p>
<p>LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRET
LOREM IPSUM TORRET LOREM IPSUM TORRET LOREM IPSUM TORRETLOREM IPSUM TORRETLOREM IPSUM TORRET
</p>

</div>
</body>
</html>

This code above as given by the famous DaveWard works absolutely fine. However I now want to make this code work with this line uncommented 

window.location.reload(true);

Can anyone tell me how to achieve the same results when the line above is uncommented. I want a refresh to occur when the user clicks on ‘ShowMore’.

Also please note that this jQuery code will be kept in a seperate file and used for multuple pages. The page url is in the format http://www.xyz.com/displaynews?newsid=x

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To achieve what you want, you will have to make a slight change in tactics as when you reload a page your JavaScript will start from scratch (the web is stateless, so reloading a page means losing your state).

    $("#show").click(function(evt) {
    evt.preventDefault();
    window.location = window.location + "#showmore";
}

    Use this click event to load the same page, but with a flag or query-string that tells you more should be displayed…

    if (window.location.indexOf("#showmore") == -1) {
    $("#someDiv p:not(:first)").hide();
    $("#someDiv p:first").after('<a id="show" href="#">Show more</a>');
}

    And wrap the hide-code in a check to see if you should hide the text or not.

    • 0