I am trying to add a side menu to a webpage, which acts responsive similar to a navbar (unfortunately I have still a navbar on top).
In https://jsfiddle.net/ralfavatar/crve8nxb/ I posted the code and if you size up the result window you should see on the left side (yellow) a menu, which is hidden down to a certain screen size --> good.
But I want to have instead a toggle button (like the hamburger button from the navbar), which shows me this menu like a dropdown.
I didn't find any hints and I have no idea how I can connect a toggle button with a menu to the existing menu, or, which I would appreciate, to toggle the existing menu with this button.
Does anybody an idea for this?
Here is the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Content -->
<section class="mainsection">
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-sm-3" id="debug1">
<nav class="nav nav-pills flex-column d-none d-lg-block">
<a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
<a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
<a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
<a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
</nav>
</div>
<div class="col-xs-pull-12 col-sm-9" id="debug2">
<div class="maincontent align-content-lg-center">
<div class="tab-content">
<div class="tab-pane active fade in" id="aboutme">
Hallo 1
</div>
<div class="tab-pane active fade in" id="location">
Hallo 2
</div>
<div class="tab-pane fade" id="products">
Hallo 3
</div>
<div class="tab-pane fade" id="interestingthings">
Hallo 4
</div>
</div>
</div>
</div>
</div>
</div>
</section>
The way to influence yellow placeholder for sidebar with toggle (hamburger) button is simply to change data-target html attribute for that button with target id (#debug1).
This way you can move menu to sidebar in yellow area and toggle it.
In your example case yellow area will appear/disappear but you can build menu sidebar on top of that.
Moin
<button type="button" class="navbar-toggler ml-auto"
data-toggle="collapse" data-target="#debug1" aria-expanded="false"
aria-controls="navbarResponsive" aria-label="Toogle navigation">
UPDATE :
I have added (copy/paste) hamburger button from navbar and placed it in yellow section and targeted red area that should simulate dropdown menu. Reordering of HTML you can place it inside of yellow section too. I hope this helps.
<!-- Content -->
<section class="mainsection">
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-sm-3" id="debug1">
<button type="button" class="navbar-toggler ml-auto"
data-toggle="collapse" data-target="#debug2" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<nav class="nav nav-pills flex-column d-none d-lg-block">
<a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
<a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
<a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
<a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
</nav>
</div>
<div class="col-xs-pull-12 col-sm-9" id="debug2">
<div class="maincontent align-content-lg-center">
<div class="tab-content">
<div class="tab-pane active fade in" id="aboutme">
Hallo 1
</div>
<div class="tab-pane active fade in" id="location">
Hallo 2
</div>
<div class="tab-pane fade" id="products">
Hallo 3
</div>
<div class="tab-pane fade" id="interestingthings">
Hallo 4
</div>
</div>
</div>
</div>
</div>
</div>
</section>
UPDATE 2 (I have now targeted sidebar menu to toggle with button inside yellow section sidebar) :
<!-- Content -->
<section class="mainsection">
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-sm-3">
<button type="button" class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#debug3" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<nav class="nav navbar-collapse collapse nav-pills flex-column d-none d-lg-block" id="debug3">
<a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
<a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
<a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
<a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
</nav>
</div>
<div class="col-xs-pull-12 col-sm-9" id="debug2">
<div class="maincontent align-content-lg-center">
<div class="tab-content">
<div class="tab-pane active fade in" id="aboutme">
Hallo 1
</div>
<div class="tab-pane active fade in" id="location">
Hallo 2
</div>
<div class="tab-pane fade" id="products">
Hallo 3
</div>
<div class="tab-pane fade" id="interestingthings">
Hallo 4
</div>
</div>
</div>
</div>
</div>
</div>
</section>
UPDATE 3 :
<!-- Content -->
<section class="mainsection">
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-sm-3" style="background-color: #000">
<button type="button" class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#debug3" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="row">
<div class="col-xs-1 col-sm-3" id="debug3">
<nav class="nav navbar-collapse collapse nav-pills flex-column d-none d-lg-block">
<a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
<a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
<a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
<a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
</nav>
</div>
<div class="col-xs-pull-12 col-sm-9" id="debug2">
<div class="maincontent align-content-lg-center">
<div class="tab-content">
<div class="tab-pane active fade in" id="aboutme">
Hallo 1
</div>
<div class="tab-pane active fade in" id="location">
Hallo 2
</div>
<div class="tab-pane fade" id="products">
Hallo 3
</div>
<div class="tab-pane fade" id="interestingthings">
Hallo 4
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Related
I need to get the id of the active tab-pane every time that I change from tab to tab in my page and, depending on which tab-pane it is(tab-pane1,tab-pane2,tab-pane3), store(tab-pane1 = 1 and so on) in a variable and display it in the console.
Using vanilla JS or jQuery, both are fine.
my code looks like this
<ul class="nav nav-tabs nav-success" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-icon">
</div>
<div class="tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content py-3">
<div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
<!-- content tab-pane1 -->
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel">
<!-- content tab-pane2 -->
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel">
<!-- content tab-pane3 -->
</div>
My jQuery looks like this.
console.log($(".tab-pane.active").attr("id"));
You can use class shown.bs.tab to get active tab number. Get active tab href attribute and slice to get desire result.
Example:
console.log($("a.active").attr("href").slice(-1)); // Get value when page load if needed
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
var result = $(e.target).attr("href").slice(-1); // get activ tab number
console.log(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs nav-success" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-icon">
</div>
<div class="tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content py-3">
<div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
<!-- content tab-pane1 -->
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel">
<!-- content tab-pane2 -->
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel">
<!-- content tab-pane3 -->
</div>
Note: there is not attribute id on anchor tag so why I catch href attribute and slice.
I'm a beginner using Bootstrap. I've searched a lot of related problems but didn't find useful solution. Here is part of my code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<!-- Navigation Bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="true" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Function Graph</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#about">About</a></li>
<li class="dropdown">
Plot<span class="caret"></span>
<ul class="dropdown-menu">
<li><a class="dropdown-item" data-toggle="tab" href="#automatic">Automatic</a></li>
<li><a class="dropdown-item" data-toggle="tab" href="#manual">Manual</a></li>
</ul>
</li>
<li><a data-toggle="tab" href="#faqs">FAQs</a></li>
<li><a data-toggle="tab" href="#comment">Comment</a></li>
<li><a data-toggle="tab" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade in active" id="about">
<div class="jumbotron">
<h1>Draw your math function on web</h1>
<p>If you have any problems, please navigate to <em><strong><a data-toggle="tab" href="#faqs">FAQs</a></strong></em> on the top and there are some solutions.</p>
<p>If you still have unsolved questions, please don't hesitate to <em><strong><a data-toggle="tab" href="#contact">Contact</a></strong></em> us via e-mail.</p>
</div>
</div>
<div class="tab-pane fade" id="automatic">
<p>automatic</p>
</div>
<div class="tab-pane fade" id="manual">
<p>manual</p>
</div>
<div class="tab-pane fade" id="faqs">
<p>faqs</p>
</div>
<div class="tab-pane fade" id="comment">
<p>comment</p>
</div>
<div class="tab-pane fade" id="contact">
<p>contact</p>
</div>
</div>
</div>
What I want to do is: when click "FAQs", it can not only show the content of faqs, but also navigate to "FAQs" on the navigation bar, but now it is still under the "About" bar.
You can use the method show.bs.tab, described in the Official Documentation.
Basically, you listen to the newly-active just-shown tab, you get its id and highlight the corresponding element inside the nav.
Here's the code:
$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
$('nav').find('li.active').removeClass('active');
$('nav').find('a[href="#'+$('.tab-pane.active').attr('id')+'"]').parent('li').addClass('active');
});
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<!-- Navigation Bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="true" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Function Graph</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#about">About</a></li>
<li class="dropdown">
Plot<span class="caret"></span>
<ul class="dropdown-menu">
<li><a class="dropdown-item" data-toggle="tab" href="#automatic">Automatic</a></li>
<li><a class="dropdown-item" data-toggle="tab" href="#manual">Manual</a></li>
</ul>
</li>
<li><a data-toggle="tab" href="#faqs">FAQs</a></li>
<li><a data-toggle="tab" href="#comment">Comment</a></li>
<li><a data-toggle="tab" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade in active" id="about">
<div class="jumbotron">
<h1>Draw your math function on web</h1>
<p>If you have any problems, please navigate to <em><strong><a data-toggle="tab" href="#faqs">FAQs</a></strong></em> on the top and there are some solutions.</p>
<p>If you still have unsolved questions, please don't hesitate to <em><strong><a data-toggle="tab" href="#contact">Contact</a></strong></em> us via e-mail.</p>
</div>
</div>
<div class="tab-pane fade" id="automatic">
<p>automatic</p>
</div>
<div class="tab-pane fade" id="manual">
<p>manual</p>
</div>
<div class="tab-pane fade" id="faqs">
<p>faqs</p>
</div>
<div class="tab-pane fade" id="comment">
<p>comment</p>
</div>
<div class="tab-pane fade" id="contact">
<p>contact</p>
</div>
</div>
</div>
Link to a working Codepen.
I have a problem with nav-tab and tab-pane.
I have successfully implemented nav-tab but tab pane is not working correctly.
when I click on a second nav-tab then the respective content does not appear. Well, I am new to bootstrap learning good ways to style the content. Please answer I am stuck there and not finding any solution.
Here is the code:
<div class="row row-content">
<div class="col-12">
<h2>Corporate Leadership</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#peter" role="tab" data-toggle="tab">Peter Pan, CEO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#danny" role="tab" data-toggle="tab">Dhanasekaran Witherspoon, CFO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#agumbe" role="tab" data-toggle="tab">Agumbe Tang, CTO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#alberto" role="tab" data-toggle="tab">Alberto Somayya, EC</a>
</li>
</ul>
//from here my tab pane content started
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="peter">
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the pioneering cross-cultural culinary connections.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="danny">
<h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
<p class="d-none d-sm-block">Our CFO, Danny, as he is
<em>Everything that runs, wins, and everything that stays, pays!
</em></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="agumbe">
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p class="d-none d-sm-block">Blessed with the most discerning gustatory.
<em>You click only if you survive my lick.</em></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="alberto">
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with you get a winning hit! Amma Mia!</em>
</p>
</div>
</div>
</div>
</div>
You should include Bootstrap JS and Jquery to make it work. See demo below
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row row-content">
<div class="col-12">
<h2>Corporate Leadership</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#peter" role="tab" data-toggle="tab">Peter Pan, CEO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#danny" role="tab" data-toggle="tab">Dhanasekaran Witherspoon, CFO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#agumbe" role="tab" data-toggle="tab">Agumbe Tang, CTO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#alberto" role="tab" data-toggle="tab">Alberto Somayya, EC</a>
</li>
</ul>
//from here my tab pane content started
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="peter">
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the pioneering cross-cultural culinary connections.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="danny">
<h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
<p class="d-none d-sm-block">Our CFO, Danny, as he is
<em>Everything that runs, wins, and everything that stays, pays!
</em></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="agumbe">
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p class="d-none d-sm-block">Blessed with the most discerning gustatory.
<em>You click only if you survive my lick.</em></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="alberto">
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with you get a winning hit! Amma Mia!</em>
</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
I'm trying to create two tabs containers one of them are used to describe the content of a set of files and the second are used as a list of download links for the described files.
Now what I did is try to control the two containers using one tab only, I saw a solution used data-target with two ID's like
data-target="#TabA1, #TabB1"
But it seems this option is not working with bootstrap 4.x, so is there any solution or workaround to solve this issue.
Anyway here is my code, if anyone can help me in this.
<div class="row">
<div class="col-sm-8">
<div class="card text-center ">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#TabA1" data-target="#A1, #B1" data-toggle="tab" role="tab" aria-selected="true">A1/B1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#TabA2" data-target="#A2, #B2" data-toggle="tab" role="tab" aria-selected="false">A2/B2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#TabA3" data-target="#A3, #B3" data-toggle="tab" role="tab" aria-selected="false">A3/B3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#TabA4" data-target="#A4, #B4" data-toggle="tab" role="tab" aria-selected="false">A4/B4</a>
</li>
</ul>
</div>
<div class="card-body" style="text-align: left; overflow-y: scroll; max-height: 600px;">
<div class="tab-content" id="myTabContent_A">
<div class="tab-pane fade show active" id="TabA1" role="tabpanel">
A1
</div>
<div class="tab-pane fade" id="TabA2" role="tabpanel">
A2
</div>
<div class="tab-pane fade" id="TabA3" role="tabpanel">
A3
</div>
<div class="tab-pane fade" id="TabA4" role="tabpanel">
A4
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<h5 class="card-header">Files</h5>
<div class="card-body">
<h5 class="card-title"></h5>
<div class="tab-content" id="myTabContent_B">
<div class="tab-pane fade show active" id="TabB1" role="tabpanel">
B1
</div>
<div class="tab-pane fade" id="TabB2" role="tabpanel">
B2
</div>
<div class="tab-pane fade" id="TabB3" role="tabpanel">
B3
</div>
<div class="tab-pane fade" id="TabB4" role="tabpanel">
B4
</div>
</div>
</div>
</div>
</div>
</div>
With the mentioned HTML code only I can see changes happened to the first tabs container. But I expected to see the changes happened in both of the containers A and B.
Unfortunately in bootstrap 4.X this has been removed and there have been a github issue to discuss it, it was supposed to be an idea for 4.1 but the idea has been removed in 4.2, thus it's not possible to do so in native bootstrap and you'd need to use JS.
https://github.com/twbs/bootstrap/issues/19964
I want that when someone opens it then menu must be opened, no need to click the button for opening it. When someone clicks the button then closes it instead of opening it.
Can anyone please help me? How can I achieve the result?
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Yes by putting show class with collapse it will work for you see in example code:
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse show" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>