Why isn't the content of the initial tab in a <section> shown when clicking a link in the side-drawer?

View the JSFiddle here.

Within this MCVC, a side drawer is implemented (opened by clicking the top left button) that contains three labeled links: Link One, Link Two, and Link Three. Each link has an href attribute value that starts with "#" concatenated with the corresponding id of the <section>.

In the CSS styling, all <section>s linked in this drawer are initially hidden (display:none), except for the first one which is set to display (display:block).

A JavaScript click event listener function was developed for each link. This function performs actions using JQuery such as hiding the currently displayed <section> and showing the targeted <section> related to the specific link clicked.

The Issue:

Upon clicking on any link within the side drawer, the corresponding <section> does change its style to display:block; as verified in the browser's inspector. However, upon switching to a new tab after clicking a link, the content inside the newly displayed <section> fails to load properly and instead shows a blank white space.

What could be causing this problem? Is there something crucial that I overlooked?

jquerycsshtmlmaterial-design-lite

Answer №1

If you want a specific class to be displayed when clicking on the menu item, make sure to add it to your other sections as well.

Take a look at these two sections:

<section id="delta" class="mdl-tabs__panel is-active" style="background-color:green;" >

and

<section id="maroon" class="mdl-tabs__panel is-active" style="background-color:maroon;" >

You'll see that they now have the classes mdl-tabs__panel and is-active.

In your jsfiddle, don't forget to include the is-active class on these two sections.

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

The lifecycle of XMLHTTPRequest objects in JavaScript - from creation to destruction

After years of working with traditional compiled object-oriented languages like C++ and .NET programming, I decided to dip my toes into JavaScript for a new project. As I was experimenting with AJAX, I stumbled upon a perplexing aspect related to how objec ...

javascripthtmlajaxxmlhttprequest

Ensure consistency in the heights of div elements, even when the images contained within have varying heights

I created a bootstrap webpage with a row of DIVs, each containing an image. As I resize the browser window, I noticed that the height of the first two DIVs remains consistent, but the third div's height varies because the image is only 50 pixels high. ...

htmlcss

How to Eliminate Lower Borders from DataGrid Component in Material UI (mui)

I've been trying to customize the spacing between rows in a MUI Data Grid Component by overriding the default bottom border, but haven't had much success. I've experimented with different approaches such as using a theme override, adding a c ...

cssreactjstypescriptmaterial-ui

Using Javascript to deactivate a clickable image upon clicking another image

I have two buttons with alert functions assigned to each. I want the function on the first button to only work when that button is clicked, and not work if the second button has been clicked. Below is the code I've tried, but it's not functioning ...

javascriptjquerycsshtml

Slideshow feature stops working after one cycle

Hey there! I'm currently working on a function that allows for sliding through a series of images contained within a div. The goal is to cycle back to the beginning when reaching the end, and vice versa when going in the opposite direction. While my c ...

javascriptjqueryslideshow

The background-size property in CSS does not seem to properly display on iPhones

Hello there! I'm facing an issue with my CSS code when it comes to displaying the image on Safari browser. It works perfectly fine on other browsers, but for some reason on Safari, the image doesn't show up correctly. I tried using a media query ...

htmlcsssafari

Can a website be designed to load a specific font for mobile phones, such as Arial Black for iOS?

Although the font Arial Black is commonly available on both Mac and PC systems, it is not accessible on iOS devices. Is there a way for a webpage to implement CSS techniques or tricks (such as assigning a class like "mobile" or "ios" to the body element), ...

htmlcssiphonewebfonts

What is the best way to navigate between elements using AJAX?

My experience in Ajax is minimal. I've managed to create two <li> elements with <a> elements inside, each linking to different HTML files. My goal is for clicking on a link to automatically load the corresponding HTML file without refreshi ...

htmljquerycssajax

Activate all chosen CSS circles

I'm currently working on creating a progress bar using CSS circles. The idea is that when you click on each circle in sequence (1, 2, 3), all three circles and the line connecting them will fill up with red color. If you then go back (3, 2, 1), the co ...

javascripthtmlcss

How come jQuery is retaining the original DOM element classes even after I have modified them using jQuery?

Here is the code snippet I am working on: $(".drop-down-arrow-open i").click(function(){ console.log("The click function for .drop-down-arrow-open is triggered even when it is closed"); let thisParent = $(this).closest(".projects-container").find(".need ...

javascriptjqueryhtml

Clicking our way back through the loop

Looking to display a name when each item is clicked. I've assigned an ID to each element, but it seems like I'm overlooking something. In the current code, I'm thinking there should be a variable involved, but I'm uncertain: $(document ...

javascriptjqueryloops

The clickable areas for the href and onclick functions are extremely small and positioned inaccurately on the screen

The code below is supposed to load an image of a 'close window' button that should be clickable. However, when the page loads, the clickable area is only a couple of pixels wide and a pixel or two high, positioned just below or above the center o ...

htmlcss

JavaScript accordions failing to open

I've encountered an issue with my website that includes JS accordions. Strangely, they are not opening on the live site, but they function properly on Codepen. I checked the console in Chrome and found no error messages, however, when I looked at the ...

javascripthtmlcssaccordion

The Bootstrap Tooltip seems to be glued in place

Utilizing jQuery, I am dynamically generating a div that includes add and close buttons. Bootstrap tooltips are applied to these buttons for additional functionality. However, a problem arises where the tooltip for the first add button remains visible even ...

javascriptjqueryhtmlcsstwitter-bootstrap

Applying a CSS border to a div that perfectly encloses a span, adjusting to the

My goal is to create a nested structure where a div contains a span element like this: ---------- |Sentence| ---------- ----------------- |It's a looooong| |sentence | ----------------- While it works well for short sentences, long ones end u ...

htmlcss

The absence of a semi-colon in JSLint

I encountered an error message indicating a semicolon is missing, however I am unsure of where to place it. Here is the snippet of code: $('.animation1').delay(350).queue(function(){ $(this).addClass("animate-from-top") }); ...

javascriptjquerydebuggingjslint

The ajax method for loading an xml file results in displaying the undefined message

When attempting to fetch content from an xml file using ajax, the page initially displays "undefined". However, upon refreshing the page, the content loads successfully. Take a look at my code snippet below: $.ajax({ type: "GET", url: "xm ...

javascriptjqueryhtmlxmlajax

Employ variables as a jQuery selector

let myLink = "#portfolio-link-" + data[i].pf_id; I am storing an ID in a variable. $("#pf-container-1").append(portfolio); console.log(myLink); $(myLink).append(function(){ $("<button class='btn btn-inverse' id='portfo ...

javascriptjqueryvariablesselector

What separates $(document).ready() from embedding a script at the end of the body tag?

Can you explain the distinction between running a JavaScript function during jQuery's $(document).ready() and embedding it in the HTML within script tags at the bottom of the body? Appreciate your insights, DLiKS ...

javascriptjqueryhtml

Troubleshooting a Windows Phone HTML5 app encountering an Ajax error

Currently, I am working on developing a Windows Phone application specifically focusing on creating a "Windows Phone HTML 5 app". However, I have encountered an issue while using ajax with Jquery (version 1.9.1). The snippet of my code is as follows: ...

jqueryajaxhtmlwindows-phone-8