Split post into many numbered Divs and reload whole page when clicking to show the hidden content

Question

I want to refresh the page on clicking the buttons and show the hidden div. My code below is working well. I want to add extra property to the code. I want page reloads when clicking buttons and keep the chosen div shown. Example: When click on button "2" I want page first to be reloaded and second to show "//Content of second page goes here"

My code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="content_1">
    //Content of first page goes here
</div>
<div id="content_2" style="display:none;">
    //Content of second page goes here
</div>
<div id="content_3" style="display:none;">
    //Third page content goes here
</div>

<p style="font-weight:bold;">Pages: 
    <a href="#button_1" id="button_1"> 1</a>
    <a href="#button_2" id="button_2"> 2</a>
    <a href="#button_3" id="button_3"> 3</a>
</p>
<div class="clearLeft"></div> 

<script type="text/javascript">
    $(document).ready(function(){
        var a = 200;
        $('#button_1').css("background-color","#00CCFF");
        $('#button_1').click(function(){
            $('#content_1').fadeIn(a);
            $('#content_2').fadeOut();
            $('#content_3').fadeOut();
            $('#content_4').fadeOut();
            $('#button_1').css("background-color","#00CCFF");
            $('#button_2').css("background-color","#99FF99");
            $('#button_3').css("background-color","#99FF99");
            $('#button_4').css("background-color","#99FF99");
        });
        $('#button_2').click(function(){
            $('#content_1').fadeOut();
            $('#content_2').fadeIn(a);
            $('#content_3').fadeOut();
            $('#content_4').fadeOut();
            $('#button_2').css("background-color","#00CCFF");
            $('#button_1').css("background-color","#99FF99");
            $('#button_3').css("background-color","#99FF99");
            $('#button_4').css("background-color","#99FF99");
        });
        $('#button_3').click(function(){
            $('#content_1').fadeOut();
            $('#content_2').fadeOut();
            $('#content_3').fadeIn(a);
            $('#content_4').fadeOut();
            $('#button_3').css("background-color","#00CCFF");
            $('#button_1').css("background-color","#99FF99");
            $('#button_2').css("background-color","#99FF99");
            $('#button_4').css("background-color","#99FF99");
        });
        $('#button_4').click(function(){
            $('#content_1').fadeOut();
            $('#content_2').fadeOut();
            $('#content_3').fadeOut(a);
            $('#content_4').fadeIn();
            $('#button_4').css("background-color","#00CCFF");
            $('#button_1').css("background-color","#99FF99");
            $('#button_2').css("background-color","#99FF99");
            $('#button_3').css("background-color","#99FF99");
        });
    });
</script>

<script>
    var urlHash = window.location.hash
    $(urlHash).trigger('click')
</script>

<style>
    .pages
    {
        position:relative;
        top:20px;
        font:1.1em Arial, Helvetica, sans-serif;
        color:#000033;
        font-weight:bold;
        width:200px;
        margin:0px auto;
    }

    .pages ul
    {
        marging:0px;
        padding:0px;
    }

    .pages li
    {
        list-style-type:none;
        float:left;
        margin-left:5px;
    }

    .pages li a
    {
        padding:5px 7px 7px 5px;
        border:1px solid #999999;
        background-color:#99FF99;
        text-decoration:none;  
        display:block;
    }

    .pages li a:hover
    {
        background-color: #00CCFF;    
    }

    .clearLeft
    {
        clear:left;
    }

    .clearRight
    {
        clear:right;
    }
</style>

Do you really need to "refresh the page" ? If there is no need to hit the server, you can just hide/show the divs, or is there more to this? — Neil N, Jan 05 '14 at 18:35
Why you need to reload the page? you just need to load the new content using $.ajax call, to load Asynchronously the content inside the page. — Alvise Susmel, Jan 05 '14 at 18:38
Actually, I want to reload the page so that I could reload Ads content inside the page. So, any idea? — Mouneer, Jan 05 '14 at 21:11
After lookin around, it looks like you need [(-This-)](http://stackoverflow.com/questions/5404839/how-can-i-refresh-a-page-with-jquery) for reloading a page w/ jQuery, and [(-This-)](http://stackoverflow.com/questions/8383742/keeping-toggled-class-after-page-refresh) for keeping attributes the same after a page reload. Does this help? — Blundering Philosopher, Jan 05 '14 at 22:59
Please think usability first, revenue second. If you want to reload the ads, that doesn't mean you need to reload the page, and how frustrating would it be for the user that you reload the page when they already have the content they want. Check this link http://www.devplumber.com/2013/11/26/dynamically-reload-google-adsense-ads-without-refreshing-the-entire-page/ — pedalpete, Jan 06 '14 at 01:29

score 0 · Accepted Answer · answered Jul 06 '15 at 19:47

After studying web development, I found it very easy to accomplish this! Here is the answer for my question:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="content_1">
    //Content of first page goes here
</div>
<div id="content_2" style="display:none;">
    //Content of second page goes here
</div>
<div id="content_3" style="display:none;">
    //Third page content goes here
</div>

<p id ="container" style="font-weight:bold;" >Pages: 
    <a href="#button_1" id="button_1"> 1</a>
    <a href="#button_2" id="button_2"> 2</a>
    <a href="#button_3" id="button_3"> 3</a>
</p>
<div class="clearLeft"></div> 

<script type="text/javascript">
    $(document).ready(function(){
        $('#container').click(function(){
            location.reload();
        });
        var hashes = window.location.href.split('#');
        var index = hashes[1].split('_')[1];
        var a = 200;
        if(index == 1){
            $('#content_1').fadeIn(a);
            $('#content_2').fadeOut();
            $('#content_3').fadeOut();
            $('#content_4').fadeOut();
            $('#button_1').css("background-color","#00CCFF");
            $('#button_2').css("background-color","#99FF99");
            $('#button_3').css("background-color","#99FF99");
            $('#button_4').css("background-color","#99FF99");
        }else if(index == 2){
            $('#content_1').fadeOut();
            $('#content_2').fadeIn(a);
            $('#content_3').fadeOut();
            $('#content_4').fadeOut();
            $('#button_2').css("background-color","#00CCFF");
            $('#button_1').css("background-color","#99FF99");
            $('#button_3').css("background-color","#99FF99");
            $('#button_4').css("background-color","#99FF99");
        }else if(index == 3){
            $('#content_1').fadeOut();
            $('#content_2').fadeOut();
            $('#content_3').fadeIn(a);
            $('#content_4').fadeOut();
            $('#button_3').css("background-color","#00CCFF");
            $('#button_1').css("background-color","#99FF99");
            $('#button_2').css("background-color","#99FF99");
            $('#button_4').css("background-color","#99FF99");
        }else if (index == 4) {
            $('#content_1').fadeOut();
            $('#content_2').fadeOut();
            $('#content_3').fadeOut(a);
            $('#content_4').fadeIn();
            $('#button_4').css("background-color","#00CCFF");
            $('#button_1').css("background-color","#99FF99");
            $('#button_2').css("background-color","#99FF99");
            $('#button_3').css("background-color","#99FF99");
        };
    });
</script>

<style>
    .pages
    {
        position:relative;
        top:20px;
        font:1.1em Arial, Helvetica, sans-serif;
        color:#000033;
        font-weight:bold;
        width:200px;
        margin:0px auto;
    }

    .pages ul
    {
        marging:0px;
        padding:0px;
    }

    .pages li
    {
        list-style-type:none;
        float:left;
        margin-left:5px;
    }

    .pages li a
    {
        padding:5px 7px 7px 5px;
        border:1px solid #999999;
        background-color:#99FF99;
        text-decoration:none;  
        display:block;
    }

    .pages li a:hover
    {
        background-color: #00CCFF;    
    }

    .clearLeft
    {
        clear:left;
    }

    .clearRight
    {
        clear:right;
    }
</style>

Split post into many numbered Divs and reload whole page when clicking to show the hidden content

1 Answers1

Linked

Related