Expanding the content of a single page by clicking on a separate tab

I have a link on Page A.

Page B has two tabs, with the content of tabs 1 and tab 2 currently set to "display:none". I want clicking the hyperlink on page A to automatically open or activate the second tab on page B.

I am seeking a solution using JavaScript.

PageA.html

<a href="PageB.html">Show Second Tab on 'PageB.html'</a>

PageB.html:

<div id="tab1" style="display:none;">This is the content for the first tab</div>
<div id="tab2" style="display:none;">This is the content for the second tab</div>

Thank you

javascripthtmlcss

Answer №1

XPage.html:

<a href="YPage.html#tab3">Display 3rd Tab of 'YPage.html'</a>

YPage.html:

<div id="tab1" style="display:none;">Content for the first tab</div>
<div id="tab2" style="display:none;">Content for the second tab</div>
<script type="text/javascript">
 document.getElementById(window.location.hash.substr(1)).style.display='block';
</script>

Answer №2

This custom script I created was incredibly useful for me.

const lnk = window.location.hash;
    const cap= lnk.substr(1);
    const splt = cap.split('#');
    const str2 = splt[0];
    const str3 = splt[1];
    const str4 = splt[2];
    const str5 = splt[3];
    document.getElementById(str2).style.display='block'; /*Displaying 1st Tab in BPage Tabs box*/
    document.getElementById(str3).style.display='block'; /*Displaying 2nd Tab in BPage Tabs Box*/
    document.getElementById(str4).style.display='none'; /* Hiding Active tab of 1st Tabs box from BPage*/
    document.getElementById(str5).style.display='block'; /*Displaying 1st active tab in 2nd Tabs Box */

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

Issue with React/D3.js Density Plot - Error: The <path> attribute d is expecting a number, but received "M10,NaNL12,NaNC14,Na…"

I'm currently working on implementing a Density Plot in React using D3.js, but unfortunately, the plot is not appearing on the screen. Since I don't have much experience with charts and data visualization, I've been trying to follow the exam ...

javascriptreactjsd3.jsvisualizationdensity-plot

Is the state of the React.js component empty?

HTML: <!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Tutorial</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script> ...

javascriptreactjsfirebase

PhpStorm 2019.2 introduces Material UI components that have optional props instead of being mandatory

My PhpStorm 2019.2 keeps showing me a notification that the Button component from Material UI needs to have an added href prop because it is required. However, when I refer to the Material UI API, I see something different. Take a look at this screenshot: ...

javascriptreactjstypescriptphpstormmaterial-ui

Why does Array Object sorting fail to handle large amounts of data in Javascript?

Encountered an issue today, not sure if it's a coding problem or a bug in Javascript. Attempting to sort an object array structured like this: const array = [{ text: 'one', count: 5 }, { text: 'two', count: 5 }, { text: 'thre ...

javascriptarrayssorting

I am looking to extract solely the numerical values

Programming Tools ・ react ・ typescript ・ yarn I am trying to extract only numbers using the match method But I keep encountering an error Error Message: TypeError: Cannot read property 'match' of undefined const age="19 years ...

javascriptreactjstypescript

Efficiently loading Angular views with lazy loading techniques

I am currently working on a calculator website powered by Angular. This single-page site is fully responsive and divided into 7 sections, each featuring different calculators based on user preferences. To improve loading time, I am interested in implementi ...

htmlangularjs

How to prevent text from overflowing outside the Material UI Container/Box?

One issue I'm facing is with an Alert that displays long strings on my website. Here's the code snippet in question: <Container maxWidth="md"> <Box sx={{ mt: 3, border:1}}> <Box> {hasSubmitted ? ...

javascriptreactjsmaterial-ui

Implementing a pop-up notification at the center of the display for empty fields

I am currently working on a task that requires me to display a pop-up message at the top-middle of the screen stating "please fill in all fields before submitting". This custom box should be stylable using CSS. Although the solution seems simple, I am str ...

javascripthtmlcsspopupwindow

The documentation for Gridsome/Netlify CMS has a flaw that results in Graphql not functioning

My attempts to integrate Gridsome with NetlifyCMS using Gridsome's documentation have been unsuccessful. Below is a snippet of the Netlify config.yml setup: collections: - name: "posts" label: "Posts" folder: "posts" create: true s ...

javascriptvue.jsnetlifynetlify-cmsgridsome

react.js function that returns 'undefined'

Having trouble with my class function that returns undefined when I try to use the return value. Main.js: let db = new Database() let username = db.get() return( //returns undefined <p>{username}</p> ) database.js: class Database { [... ...

javascriptnode.jsreactjsnpm

Using JavaScript to control a dropdown list based on the selection of another dropdown

Hello, I am new to programming and a JavaScript beginner seeking help from you all. I have two dropdown lists and I am attempting to manipulate one based on the selection of the other using JavaScript. Both dropdown lists contain time in hours denoting st ...

javascriptjquerydrop-down-menu

Prevent the ability to capture photos using the HTML input file feature within an iOS application

Is there a way to restrict users from taking photos within an iOS app that is WKWebView based, and instead only allow them to select photos from their library or iCloud? Currently, I am aware of the ability to force users to utilize the camera with the ca ...

ioshtmlimage-uploadingwkwebview

Tips for showcasing information beneath a title on a webpage in Yii2 without duplicating the header

Looking to pass an array to my view that includes headings and corresponding content lists. The structure of my array is as follows: Array ( [0] => Array ( [trimester] => Trimester1 [subject] => ABC ) ...

htmlarraysfor-loopforeachyii2

How can I make an HTML button the default option within a form?

Currently, I am working on an asp.net page which contains a mix of asp.net buttons and HTML input[type=button] elements. These HTML buttons are specifically used to initiate AJAX calls. My dilemma arises when the user hits ENTER - instead of defaulting to ...

c#javascriptasp.net.nethtml

What are the steps to successfully implement "Pointermove" event delegation in Safari iOS for parent/child elements?

I've encountered an issue that I'm struggling to find a solution for. My goal is to implement an event delegate using pointermove on a parent container, and I need to be able to detect when the event transitions between a child element and the pa ...

javascriptioswebeventssafari

Checking form entries and updating HTML

Prompt Description: In my endeavor to authenticate a <form> on the server side, I have opted to send form inputs as JSON to the back-end (an express.js app) using AJAX. Post-validation, another JSON is dispatched to the front-end with a structure ak ...

jqueryhtmlnode.jsajaxexpress

jQuery: Eliminate the inline display property of "none"

Trying to figure out how to remove inline styles added by jQuery on hover from the current menu item in the navigation. I want the current menu item to remain visible even after hover, but jQuery is setting it to display:none. I attempted to add "display: ...

jquerycssmenunavigationinline-styles

Tips for aligning pagination in the MUI v5 table component and creating a fixed column

I am currently experimenting with MUI table components and have created an example below with pagination. const MuiTable = () => { const [page, setPage] = useState(0); const [rowsPerPage, setRowsPerPage] = useState(5); const [data, setData] ...

javascriptreactjsmaterial-uipagination

AngularJs is being used to extract data from Firebase with the help of $value, $id, and

I have been working on retrieving data from Firebase in my HTML using AngularJS. Everything is functioning well, however, when I access the child node, the data is displayed in an unexpected format. Please refer to the images below for more details: This ...

htmlangularjsjsonfirebase

Unlocking the power of translation in React: Implementing Amazon Translate or Google Translate for AXIOS responses

I'm currently working on converting Axios JSON responses in React. Here is the code snippet: axios.get('https://jsonplaceholder.typicode.com/users') .then(res => { ...translation_logic_here setU ...

javascriptreactjsgoogle-translateamazon-translate