In this MCVC, I have a side drawer (opened by clicking the top left button) in which there are three links labeled Link One, Link Two and Link Three. Each of these links has an href with a value equal to # concatenated with the id of the <section> this link corresponds to.
In CSS, all three <section>s corresponding to these links get a display:none, except the first one which gets display:block.
I wrote a JS click handler for these links. What this function does is that it hides (JQuery hide()) the currently displayed <section> and shows (JQuery show()) the <section> corresponding to the link clicked.
The Problem:
When I click on a link in the side drawer, the <section> corresponding to it does get display:block; (I checked in the browser's inspector). So far so good.
BUT
the problem is that when I click on a link in the side drawer, the content of the first tab in the newly displayed <section> is NOT displayed. Instead a white blank space is displayed.
Where am I going wrong? What am I missing?
$(".mdl-navigation__link").click(function() {
var idOfSectionToShow = $(this).attr("href");
//alert(idOfSectionToShow);//check
$(".mdl-tabs").each(function() {
if ( $(this).css("display") != "none" ) {
//alert($(this).attr("class"));//check
$(this).hide();
}
});
//alert( typeof $(idOfSectionToShow) );
//alert( "idOfSectionToShow: " + $(idOfSectionToShow).attr("id") );
$(idOfSectionToShow).show();
});.mdl-tabs__tab-bar {
background-color: rgb(63,81,181);
padding: 0 0 1px 56px;
justify-content: flex-start !important;
}
.tabs-bar {
height: initial;
overflow-x: auto;
}
.mdl-tabs {
display:none;
}
.tabs-container1 {
display:block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" />
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<button
class="mdl-button mdl-js-button mdl-button--icon open-modal-button">
<!-- <i class="material-icons">view_module</i>-->
</button>
<!-- Add button here -->
</div>
<!-- Bottom row, not visible on scroll -->
<div class="mdl-layout__header-row">
<div class="story-summary">
<h4>Story One</h4>
<p>Story story story story story story story story story story story story story story story story.</p>
</div>
</div>
<!-- .mdl-layout__header-row -->
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link navLink1" href="#tabs-container1">Link One</a>
<a class="mdl-navigation__link navLink2" href="#tabs-container2">Link Two</a>
<a class="mdl-navigation__link navLink3" href="#tabs-container3">Link Three</a>
</nav>
</div>
<main class="mdl-layout__content">
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<section id="tabs-container1" class="mdl-tabs mdl-js-tabs tabs-container1">
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-left-button"><i class="material-icons">chevron_left</i></div>
<div class="mdl-tabs__tab-bar tabs-bar">
<a href="#alpha" class="mdl-tabs__tab is-active" style="color:white;" >Alpha</a>
<a href="#beta" class="mdl-tabs__tab" style="color:white;" >Beta</a>
<a href="#gamma" class="mdl-tabs__tab" style="color:white;" >Gamma</a>
</div>
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-right-button"><i class="material-icons">chevron_right</i></div>
<section id="alpha" class="mdl-tabs__panel is-active" style="background-color:pink;" >
What is Lorem Ipsum?
em Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors nefore always free from repetition, injected humour, or non-characteristic words etc.
</section>
<section id="beta" class="mdl-tabs__panel" style="background-color:wheat;" >terdum ex, id feugiat libero orci ornare mauris. Nulla et est porttitor, facilisis nibh at, blandit velit. Mauris aliquet orci eu ante mollis auctor. Vivamus tristique vitae sem sit amet dictum. Nulla sit amet feugiat nibh. Fusce interdum felis in ex interdum, id eleifend lectus sodales. Praesent ultrices tincidunt magna nec cursus. Vivamus turpis ligula, luctus eget semper sed, gravida eget felis.
nean mauris urna, sagittis in urna sed, condimentum pretium arcu.
</section>
<section id="gamma" class="mdl-tabs__panel" style="background-color:grey;" >
(de Finibus Bonorum et Malorum) للمفكر شيشيرون (Cicero) والذي كتبه في عام 45 قبل الميلاد. هذا الكتاب هو بمثابة مقالة علمية مطولة في نظرية الأخلاق، وكان له شعبية كبيرة في عصر النهضة. السطر الأول من لوريم إيبسوم "Lorem ipsum dolor sit amet.." يأتي من سطر في القسم 1.20.32 من هذا الكتاب.
للمهتمين قمنا بوضع نص لوريم إبسوم القياسي والمُستخدم منذ القرن الخامس عشر في الأسفل. وتم أيضاً توفير الأقسام 1.10.32 و 1.10.33 من "حول أقاصي الخير والشر" (de Finibus Bonorum et Malorum) لمؤلفه شيشيرون (Cicero) بصيغها الأصلية، مرفقة بالنسخ الإنكليزية لها والتي قام بترجمتها هـ
</section>
</section><!-- .mdl-tabs.mdl-js-tabs -->
-------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<section id="tabs-container2" class="mdl-tabs mdl-js-tabs tabs-container2">
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-left-button"><i class="material-icons">chevron_left</i></div>
<div class="mdl-tabs__tab-bar tabs-bar">
<a href="#delta" class="mdl-tabs__tab is-active" style="color:white;" >Alpha</a>
<a href="#zelda" class="mdl-tabs__tab" style="color:white;" >Beta</a>
</div>
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-right-button"><i class="material-icons">chevron_right</i></div>
<section id="delta" class="mdl-tabs__panel" style="background-color:green;" >
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac diam sem. Maecenas congue leo e
</section>
<section id="zelda" class="mdl-tabs__panel" style="background-color:yellow;" >
للمهتمين قمنا بوضع نص لوريم إبسوم القياسي والمُستخدم منذ القرن الخامس عشر في الأسفل. وتم أيضاً توفير الأقسام 1.10.32 و 1.10.33 من "حول أقاصي الخير والشر" (de Finibus Bonorum et Malorum) لمؤلفه شيشيرون (Cicero) بصيغها الأصلية، مرفقة بالنسخ الإنكليزية لها والتي قام بترجمتها هـ
</section>
</section> <!-- .mdl-tabs.mdl-js-tabs -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<section id="tabs-container3" class="mdl-tabs mdl-js-tabs tabs-container3">
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-left-button"><i class="material-icons">chevron_left</i></div>
<div class="mdl-tabs__tab-bar tabs-bar">
<a href="#maroon" class="mdl-tabs__tab is-active" style="color:white;" >Alpha</a>
<a href="#orange" class="mdl-tabs__tab" style="color:white;" >Beta</a>
</div>
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-right-button"><i class="material-icons">chevron_right</i></div>
<section id="maroon" class="mdl-tabs__panel" style="background-color:maroon;" >
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac diam sem. Maecenas congue leo eu suscipit mollis. Nunc efficitur phar
</section>
<section id="orange" class="mdl-tabs__panel" style="background-color:orange;" >
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac diam sem. Maecenas congue leo eu suscipit mollis. Nunc efficitur pharetra magna, eu rutrum est. Duis quis diam sed neque accumsan condimentum sit amet non felis. Integer efficitur porta nisi non tristique. Cras efficitur massa metus, in scelerisque elit dictum ac. Nulla viverra, ligula non vestibulum tincidunt, turpis erat interdum ex, id feugiat libero orci ornare mauris. Nulla et est porttitor,
</section>
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
</main>
</div>
You are missing a class on your other sections that you would like to be displayed on the click of the menu item.
Check these two section
and
Notice that it now has class mdl-tabs__panel and is-active.
In your jsfiddle you are missing the is-active class on these two sections.