Divide the webpage into multiple numbered sections and refresh the entire page when clicking to reveal the concealed information

My code:

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

<p>Pages: 
<a href="#" class="button_1"> 1</a>
<a href="#" class="button_2"> 2</a>
<a href="#" class="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");
});
});
</script>

I want to refresh the page on clicking the buttons and show the hidden div. I tried many things but the result was page reload and show the first div again whatever button chosen.

Code above is working well . I want to add extra property to the code. I want page reloads when clicking buttons and keep the div shown.

Example: When click on button "2" I want page to be reloaded and show "//Content of second page goes here"

Edit: Thanks alot @Jan-Drewniak but your idea only solved half of the problem. When I type http:// mysite.com#button_3 as url, page loads the first div not the third. I wish I could make this url work for the third because I want to use this Javascript with the button

<script>
function refreshPage(){
    window.location.href = "#button_3";
    window.location.reload();
} 
</script>

as I think this may satisfy my needs.

javascriptjqueryhtmlcss

Answer №1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="content_1">
    //First page content here
</div>
<div id="content_2" style="display:none;">
    //Second page content here
</div>
<div id="content_3" style="display:none;">
    //Content of third page is placed 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>

Answer №2

Don't forget to add the necessary jquery.js file in your code. It's essential for proper functionality.

<script src="js/jquery.js"></script>

Answer №3

Check out the live demo

Make sure to add this link in the header of your HTML document.

<script src="http://example.com/jquery-1.9.1.js"></script>

Answer №4

It appears that you are in the process of creating tabbed content. An alternative to using Javascript is to utilize the :target selector in CSS.

If you prefer the Javascript method, you can modify the buttons as follows:

<p>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>

Then incorporate this script into your Javascript code:

var urlHash = window.location.hash
$(urlHash).trigger('click')

Additionally, you will need to update the selectors for the buttons from .button_1, .button_2, .button_3 to #button_1, #button_2, #button_3.

If you require further clarification or assistance, please refer to the following implementation:

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

var urlHash = window.location.hash
$(urlHash).trigger('click')

});
</script>

Please adjust your CSS classes accordingly after changing them to IDs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to sort an array in Javascript based on the date key?

In my JavaScript loop, I am iterating through notes stored in a database and combining them into a string to be added to the DOM. The noteType serves as the key to categorize notes onto different tabs. The challenge arises when I need to display a unified ...

javascriptarrayssorting

How can one utilize a second drop-down list in asp.net to alter the selected index and visibility of a drop-down list?

I am working on an asp.net application that includes a drop down list with the following structure: <asp:DropDownList runat="server" ID="ddlChanges" CssClass="selectstyle" onchange="javascript:ddlChangesChanged();"> <asp:ListItem Text="-- Select ...

javascriptc#jqueryhtmlasp.net

Coordinate the execution of two AJAX jQuery functions

There are two jQuery functions in my code, both making ajax calls with async: false property set. Each function redirects based on the response of the ajax call. However, the first function is not redirecting because the second function is not waiting for ...

ajaxjquery

Simplifying the process of importing SCSS files in Angular 5

After extensive searching, I've come up empty-handed in finding a solution to my project dilemma. Let's say I have various .scss files within my project such as mixins.scss, vars.scss, and base.scss. Naturally, I would like to use these files in ...

cssangulartypescriptsass

Requiring two clicks for form submission with JQuery validation - Why the submit button needs to be pressed twice

I'm completely new to javascript/jquery. Currently, I'm working on validating a registration form using JQuery. The validation process is functioning correctly, but there's a small issue with submitting the form. The problem is that the us ...

jqueryjquery-validate

Having issues with ng-src and images not loading in the application

Is there a way to dynamically change the image source using ng-src? I've been attempting to switch the image file source based on an onclick event using the code below, but it's not working as expected. <html ng-app="ui.bootstrap.demo"> ...

javascriptangularjs

Navigating the complexities of extracting and storing a data type from a collection of objects

Dealing with a messy API that returns inconsistent values is quite challenging. Instead of manually creating types for each entry, I am looking for a way to infer the types programmatically. One approach could be by analyzing an array like this: const arr ...

javascripttypescripttypestype-inference

What is the process for deactivating OpenTelemetry once it has been set up?

As I embark on my OpenTelemetry journey, I find myself faced with a unique challenge. Our setup includes a PHP backend and a Node.js Express server for SSR. Our goal is to capture tracing data for specific requests. Upon receiving a request, the PHP serve ...

javascriptnode.jsexpressopen-telemetryopen-telemetry-collector

What are some ways to improve the precision of longitude and latitude data?

I have encountered an issue while using MapBox. When a user clicks on the map, I am receiving longitude and latitude coordinates that are not very accurate. For example, when I clicked in the United Kingdom, the values pointed me to the middle of the sea a ...

javascripthtmlcssmapboxmapbox-gl-js

Showing a tooltip on the right side of a control with an arrow pointing towards it in a colored

Can someone help me with displaying a tooltip to the right end of a control, with the arrow facing the same direction and changing the background color of the arrow to red? Here is my attempt so far <input id="age" title="test tooltip"> $( documen ...

jquerycssjquery-uitooltip

Tips for including absent items in an array

Looking to fill in missing weeks and years in an array of objects that have a reportYear and reportWeek property. How can I insert additional objects to cover all weeks from the beginning date to the end date? For example: Input: [ {"reportYear":2017, ...

javascriptjqueryajax

Adaptive grids in Bootstrap

I've been using bootstrap and I'm trying to get the items to align next to each other, but using the bootstrap columns doesn't seem to be working for me. I may be coding it incorrectly. <link rel="stylesheet" href="https://cdn.jsdelivr ...

htmlcsswebbootstrap-4

How can I enhance the appearance of my custom field using CSS in Advanced Custom Fields?

Utilizing the Wordpress Advanced custom field plugin, I have successfully added a custom field to my site. Within this custom field, I have inserted images and now I am looking to center them on my page using CSS styles such as margin: 0 auto. If you&apo ...

csswordpressadvanced-custom-fields

Exploring the process of setting a background image within a div tag

My goal was to design a clickable box that would redirect users to "#". I initially thought about using area maps within div or p tags, but unfortunately that wouldn't work. Does anyone have any suggestions for alternative solutions? ...

htmlcssarea

Is there a solution to successfully retrieving the value of res from the readCsv() method instead of it returning undefined?

In this scenario, I have a file uploader that accepts .json and .csv files. When the upload button is clicked, the HomeComponent calls the service dataparser which has two functions: readJson and readCsv. One function returns an observable while the other ...

javascriptangulartypescriptasynchronousobservable

Tips for positioning cards in html

I'm working on a layout with a container containing multiple cards. I want each card to align from the left border of the container to the right border, similar to the code snippet below. <html> <style> .container { display: flex; ...

htmlcssflexbox

I am currently facing an issue with my Next JS app where the search results page is not showing up when a user enters a query

I am currently working on a search application using Next.js. Within my app directory, I have 3 main files - layout.js, page.js, and searchResults.js Here is the code in layout.js: export const metadata = { title: 'xyz Search', description: ...

javascriptreactjsnext.jsreact-hooks

Printing Strings in JavaScript IF Conditional Block

Hello there! I am looking for assistance with a JavaScript concept. Recently, I created some code where in the HTML file, there is a div element with an id of "GetID" where the string outputs are meant to be displayed. The JavaScript code looks something ...

javascripthtmlcss

Using AngularJS to hide elements within a nested dictionary structure

My dictionary structure is as follows: var data = { a: [1, 2, 3, 4, 5], b: [ [1, 2], [3, 4], [5, 6] ] }; Currently, I am using ng-hide to hide an element if the value 2 exists in data->a. Here's how it's implemented: <i ...

javascriptangularjsangularjs-ng-repeatangularjs-filterangularjs-ng-show

The slider customization on Joomla is functioning perfectly on my local machine, but it seems to be encountering some issues on

Having recently started working on a Joomla website for the first time, I encountered some challenges when trying to add a slider module. Despite successfully implementing the slider on my local machine, I faced issues when transferring the code to the liv ...

javascriptphpjqueryjoomlajoomla2.5