I have several materialize tabs, where each tab will have a different collapsible expandable lists (used as a sidebar).
The tabs work correctly, and the expandable works correctly on the first tab; however, the expandable does not work on any other tab. It simply works as an accordion, and does not call the onOpenStart function within the collapsible.
Here is a simplified example of what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Using cdn for testing purposes -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Tab 1</li>
<li class="tab col s3"><a class="" href="#tab2">Tab 2</a></li>
</ul>
</div>
<!-- This Exandable works! -->
<div id="tab1" class="col s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
<!-- This Expandable does not work (just accordion) -->
<div id="tab2" class="col s3 offset-s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
</div>
</div>
<!-- cdn for testing purposes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script>
M.AutoInit();
document.addEventListener('DOMContentLoaded', function() {
let el = document.querySelector('.tabs');
let instance = M.Tabs.init(el, {});
});
document.addEventListener('DOMContentLoaded', function() {
let elem = document.querySelector('.collapsible.expandable');
let instance = M.Collapsible.init(elem, {
accordion: false,
onOpenStart: function(){console.log('collasible Open Start')}
});
});
</script>
</body>
</html>
Could someone help point out what I'm missing?
Thanks!
Your error is in this line:
let elem = document.querySelector('.collapsible.expandable');
You need to use querySelectorAll in order to init both the collapsible elements.
The snippet:
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
let el = document.querySelector('.tabs');
let instance = M.Tabs.init(el, {});
let elem = document.querySelectorAll('.collapsible.expandable');
let instanceCollapsible = M.Collapsible.init(elem, {
accordion: false,
onOpenStart: function(){
//console.log('collasible Open Start');
}
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3">Tab 1</li>
<li class="tab col s3"><a class="" href="#tab2">Tab 2</a></li>
</ul>
</div>
<div id="tab1" class="col s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
<div id="tab2" class="col s3 offset-s3">
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">First</div>
<div class="collapsible-body">Body content</div>
</li>
<li>
<div class="collapsible-header">Second</div>
<div class="collapsible-body">Body content</div>
</li>
</ul>
</div>
</div>
</div>
Related
In my sample code below, the dropdown tab contents does not show after it's viewed for first time.
(function($) {
$(function() {
$('a[data-toggle = "tab"]').on('shown.bs.tab', function(e) {
// Get the name of active tab
var activeTab = $(e.target).text();
// Get the name of previous tab
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main class="main"></main>
<hr>
<p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active">Home</li>
<li role="presentation">Details</li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>
D1
</li>
<li>
D2
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<p>This is the home page</p>
</div>
<div role="tabpanel" class="tab-pane" id="account-details">
<p>Pane 1</p>
</div>
<div role="tabpanel" class="tab-pane" id="d1">
<p>Dropdown 1</p>
</div>
<div role="tabpanel" class="tab-pane" id="d2">
<p>Dropdown 2</p>
</div>
</div>
</main>
<!-- Page style-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
When the active tab becomes one of the dropdown values (D1/D2) and when you change the active tab to any other tab, the Previous Tab: value becomes empty.
Now if I select dropdown 1 again, I don't see the content.
Any feedback is appreciated.
Thank you.
You are mixing up between Bootstrap v3 and v4 which causing this conflict, just remove the v4 one, (Your code is compatible with v3)
(function($) {
$(function() {
$('a[data-toggle = "tab"]').on('shown.bs.tab', function(e) {
// Get the name of active tab
var activeTab = $(e.target).text();
// Get the name of previous tab
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
})(jQuery);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Main -->
<main class="main">
<hr>
<p class="active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr />
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active">Home</li>
<li role="presentation">Details</li>
<li class="dropdown">
Java<b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>
D1
</li>
<li>
D2
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<p>This is the home page</p>
</div>
<div role="tabpanel" class="tab-pane" id="account-details">
<p>Pane 1</p>
</div>
<div role="tabpanel" class="tab-pane" id="d1">
<p>Dropdown 1</p>
</div>
<div role="tabpanel" class="tab-pane" id="d2">
<p>Dropdown 2</p>
</div>
</div>
</main>
<!-- End main -->
Hi I am new to bootstrap and jQuery. I have created a bootstrap Tab, which is working fine. The tabs are changing by header, but I also needs pagination to change Tab, which I am not able to do. Following is my scenario,
Tab 1 --> next button --> go to tab 2
Tab 1 <-- previous -- Tab 2 -- next ---> Tab 3
Tab 2 <-- previous -- Tab 3
Can any one help. Following is my HTML. This is just an example, I can have variable number of tabs.
<div class="row">
<!-- tabs -->
<div class="col-md-3 col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-alternate">
<li>
Question - 1
</li>
<li>
Question - 2
</li>
<li>
Question - 3
</li>
</ul>
</div>
<!-- tabs content -->
<div class="col-md-9 col-sm-9">
<div class="tab-content tab-stacked nav-alternate">
<div id="tab_1" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 1</p>
</div>
</div>
<ul class="pager">
<li class="next"><a class="radius-0" href="#" data-toggle="tab">Next →</a></li>
</ul>
</div>
<div id="tab_2" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 2</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
<li class="next"><a class="radius-0" href="#">Next →</a></li>
</ul>
</div>
<div id="tab_3" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 3</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
</ul>
</div>
</div>
</div>
</div>
Updated jQuery script to attach to the previouse/next link.
Updated class="active" to the li tag for Question-1.
<!-- tabs -->
<div class="col-md-3 col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-alternate">
<li class="active">
Question - 1
</li>
<li>
Question - 2
</li>
<li>
Question - 3
</li>
</ul>
</div>
<!-- tabs content -->
<div class="col-md-9 col-sm-9">
<div class="tab-content tab-stacked nav-alternate">
<div id="tab_1" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 1</p>
</div>
</div>
<ul class="pager">
<li class="next"><a class="radius-0" href="#" data-toggle="tab">Next →</a></li>
</ul>
</div>
<div id="tab_2" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 2</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
<li class="next"><a class="radius-0" href="#">Next →</a></li>
</ul>
</div>
<div id="tab_3" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 3</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
</ul>
</div>
</div>
</div>
<script>
$('.next').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.previous').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
I'm building a campaign site for my school. I am implementing a sidebar that changes colour on different sections of the website when its in viewport. I'm unable to make the scrollspy work.
This is what I have: https://codepen.io/aahlfeeyann/pen/oeBGdq
<body data-spy="scroll" data-target="#sidebar">
<div class="wrapper">
<nav id="sidebar">
<ul class="sidebar visible">
<li id="step1" class="active">
<a href="#hero">
<span>Home</span>
</a>
</li>
<li id="step2">
<a href="#about">
<span>About this Campaign</span>
</a>
</li>
<li id="step3">
<a href="#mvps">
<span>Our Participants</span>
</a>
</li>
<li id="step4">
<a href="#appreciation">
<span>How to fight Procrastination</span>
</a>
</li>
<li id="step5">
<a href="#details">
<span>Event Details</span>
</a>
</li>
<li id="step6">
<a href="#team">
<span>Our Team!</span>
</a>
</li>
</ul>
</nav>
<div class="bg-wrapper">
<div class="section" id="hero">
</div>
<div class="section" id="about">
<h1>About the Campaign</h1>
</div>
<div class="section" id="mvps">
<h1>Our Participants</h1>
</div>
<div class="section" id="appreciation">
<h1>Appreciation...?</h1>
</div>
<div class="section" id="details">
<h1>Event Information</h1>
</div>
<div class="section" id="team">
<h1>About the Team</h1>
</div>
</div>
</div>
</body>
Add nav class to ul element.
As per Bootstrap Docs
Scrollspy currently requires the use of a Bootstrap nav component for
proper highlighting of active links.
HTML
<ul class="sidebar visible nav">
.....
...
..
.
</ul>
Scrollspy Docs Reference
Hope This Helps..
Overview:
I want to make two level navigation of tab-content with one level content. This is my code:
<ul>
<li>
<a data-toggle="tab" href="#main">Main</a>
</li>
<li>
<ul>
<li>
<a data-toggle="tab" href="#nested">Nested</a>
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="main">Main Content</div>
<div class="tab-pane" id="nested">Nested Content</div>
</div>
It doesn't work when I do the following steps:
Click Main
Click Nested
Click Main
Details:
Initially everything is ok, code in browser looks like from source.
When I click on Main i works
When I click on Nested active class doesn't removed from first li.
Now can I click whatever and nothing happens.
JSFiddle
https://jsfiddle.net/cvgd720s/
Docs
http://getbootstrap.com/javascript/#tabs
You can nest your child tabs like so:
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
Home
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Nested 1</li>
<li role="presentation">Nested 2</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="nested1">Nested 1</div>
<div role="tabpanel" class="tab-pane" id="nested2">Nested 2</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Messages</div>
<div role="tabpanel" class="tab-pane" id="settings">Settings</div>
</div>
</div>
CODEPEN
I solved this problem myself added the script, that remove any active class:
<script>
(function(){
var menu = document.getElementsByTagName("li")[0];
var list = document.querySelectorAll("li");
menu.addEventListener("click", function() {
[].forEach.call(list, function(item) {
item.classList.remove("active");
});
});
})();
</script>
It is important, that script should be placed before jquery.js and bootstrap.js.
I am new to using the ratchet framework so I am probably missing something basic. I want to use a toggle to hide a div when the toggle is off, and display it when the toggle is on. I know the toggle name changes to toggle active when it's active but the code I found from a few other posts does not seem to be working in my situation. Any help is appreciated.
Thanks
HTML
<div class="content">
<div id="map"></div>
<ul class="table-view">
<li class="table-view-cell">
Stages
<div id="toggle1" class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Washrooms
<div class="toggle ">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Foods
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Security
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
First Aid
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
ATM
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div id="Stage1" class="StageMain">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageSecond">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageThird">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
</div>
Javascript
if(document.getElementById("toggle1").className == 'toggle active')
{
$('#Stage1').show();
}
else
{
$('#Stage1').hide();
}
you should use a handle to show/hide your element.
visit this link http://www.w3schools.com/jquery/jquery_hide_show.asp
check this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var status = 'show';
function change()
{
if(status == 'show')
{
document.getElementById("toggle1").style.display = 'none';
status = 'hide';
}
else
{
document.getElementById("toggle1").style.display = 'block';
status = 'show';
}
}
</script>
</head>
<body>
<div class="content">
<div id="map"></div>
<ul class="table-view">
<li class="table-view-cell" onclick="change()">
Stages (click here)
<div id="toggle1" class="toggle">this is test
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell" >
Washrooms
<div class="toggle ">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Foods
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Security
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
First Aid
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
ATM
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<div id="Stage1" class="StageMain">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageSecond">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
<div class="StageThird">
<a href="#"><img src="img/Untitled-1.png">
</a>
</div>
</div>
</body>
</html>