Replacing a part of my webpage with another html file

[sachinbal]

Hi,

I am creating a website for a magazine. There is a area defined in a page of my website which contains summary of articles which have been published. This contains the Headline of the articles, the date on which they were published and some introductory information about the article. This is followed with a “Read More” link. When I click the “Read More” link, I would like the area in which I have created the summary page to be replaced by an HTML which contains the complete article.

Can someone please guide me?

Regards

Sachin

[Shikkediel]

Sounds like one for jQuery (Ajax) :

$(function() {

    $('#readmore').one('click', function() {

    $('#parentdiv').load('newcontent.html');
    });
});

http://api.jquery.com/load/

You could also use a text file for it.

Another approach – add all content and hide the second one, then flip visibility once the button is clicked.

[nkrisc]

Depending on how long your article content is, it might be a better experience to load the entirety of the article with the initial page and simply hide it, then reveal the hidden content on click as Shikkediel suggested. It’s also probably simpler and less error-prone.

[sachinbal]

Thanks. I will try this.

Regards

Sachin

[Author]

Posts