I want to create a class for adding dropdown to menu even in the other dropdowns. I almost did it, but there is a problem and when I try to close the inner drop-down, the outer drop-down also closes.
When you click on secondary dropdown the first one will also close. What should I do to fix this?
$(".dropdown").each(function() {
$(this).on("click", function() {
if ($(this).attr("data-dropdown") == "closed") {
$(this).attr("data-dropdown", "opened");
$(this).css({
"height": "auto"
});
} else {
$(this).attr("data-dropdown", "closed");
$(this).css({
"height": "35px"
});
}
})
})
#font-face {
font-family: iransans;
src: url(font/IRANSansWeb.ttf);
}
* {
padding: 0;
margin: 0;
font-family: iransans;
}
html,
body {
height: 100%;
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: burlywood;
width: 200px;
}
.dropdown,
.dropdown-child {
height: 35px;
overflow: hidden;
}
.dropdown-item {
display: block;
padding: 6px;
}
.menu .dropdown-item:hover {
background-color: blueviolet;
cursor: pointer;
color: white;
}
<script src="https://kit.fontawesome.com/91f5230546.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="menu">
<div class="menu-item">
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<span>Category</span>
</div>
</div>
The main issue is because the event is propagating up the DOM, so although you click to toggle the child dropdown, the event is caught by the parent which then toggles and hides. To fix this problem, amend your click handler function to receive the event as an argument, then call stopPropagation() on it.
Also, note that you don't need to use each() here as jQuery will loop over all elements in the collection and assign the event to them. In addition you can simplify the code massively, just by using toggleClass().
Finally, it would be much better practice to hide/show the child div of the toggled dropdown instead of changing its height. This method allows you to perform more varied animations to transition the content from hidden to visible, and also prevents issues with text being clipped due to changes in font sizes or zoom levels.
Here's a working version:
$(".dropdown").on("click", e => {
e.stopPropagation();
$(e.currentTarget).toggleClass('open');
})
#font-face {
font-family: iransans;
src: url(font/IRANSansWeb.ttf);
}
* {
padding: 0;
margin: 0;
font-family: iransans;
}
html,
body {
height: 100%;
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: burlywood;
width: 200px;
}
.dropdown,
.dropdown-child {
overflow: hidden;
}
.dropdown>div {
display: none;
}
.dropdown.open>div {
display: block;
}
.dropdown-item {
display: block;
padding: 6px;
}
.menu .dropdown-item:hover {
background-color: blueviolet;
cursor: pointer;
color: white;
}
<script src="https://kit.fontawesome.com/91f5230546.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="menu">
<div class="menu-item">
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed">
<span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span>
<div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
<div>
<span class="dropdown-item">Category</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="menu-item">
<span>Category</span>
</div>
</div>
Related
I have created two radio buttons, and for both radio buttons, I used for creating <i> font icon. As I had created that earlier as a check box and it worked properly, I used the same code for creating the radio buttons. Fixed the position; it works if I go by the check box. For these radio buttons, I used the toggle() function in jQuery. But when I use the radio buttons, then I saw that I can not do one selection at a time.
function togperm()
{
$("#perm").toggle();
}
function togchq()
{
$("#chq").toggle();
}
.radiocirl {
width: 20px;
height: 20px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.bluefont{ color:rgb(0,98,168) !important; }
.shcursor{cursor: pointer;}
.f10{font-size: 1.0em !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div class="col-12">
<div class="row">
<div class="col-1">
<div class="radiocirl shcursor" onclick="togchq()">
<i class="fa fa-circle f10 bluefont" id="chq" style="position: absolute; display: none; margin: 2px 0.4px;"></i>
</div>
</div>
<div class="col-11">
<div class="col-12"> Correspondence Address</div>
</div>
</div>
<div class="row">
<div class="col-1">
<div class="radiocirl shcursor" onclick="togperm()">
<i class="fa fa-circle f10 bluefont" id="perm" style="position: absolute; display: none;margin: 2px 0.4px;"></i>
</div>
</div>
<div class="col-11">
<div class="col-12">Add Address</div>
</div>
</div>
</div>
</div>
You can use .find() and .not() methods to achieve same . First you can get closest div which contains both your radio button then using .not() exclude div where click event has occur then simply use hide() to hide other i icon.
Demo Code :
$(".radiocirl").on("click", function() {
//get the `i` tag
var selector = $(this).find(".bluefont")
selector.toggle(); //toggle same
//get closest div `outer` and find `i` tag not(the one which is inside the div which is clicked hide it)
$(this).closest(".outer").find(".bluefont").not(selector).hide()
})
.radiocirl {
width: 20px;
height: 20px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.bluefont {
color: rgb(0, 98, 168) !important;
}
.shcursor {
cursor: pointer;
}
.f10 {
font-size: 1.0em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!--aded outer class-->
<div class="col-md-12 outer">
<div class="col-12">
<div class="row">
<div class="col-1">
<div class="radiocirl shcursor">
<i class="fa fa-circle f10 bluefont" id="chq" style="position: absolute; display: none; margin: 2px 0.4px;"></i>
</div>
</div>
<div class="col-11">
<div class="col-12"> Correspondence Address</div>
</div>
</div>
<div class="row">
<div class="col-1">
<div class="radiocirl shcursor">
<i class="fa fa-circle f10 bluefont" id="perm" style="position: absolute; display: none;margin: 2px 0.4px;"></i>
</div>
</div>
<div class="col-11">
<div class="col-12">Add Address</div>
</div>
</div>
</div>
</div>
So i'm using three unique IDs "titleselected0", "titleselected1", "titleselected2". Each with an onclick function which runs a function "myFunction0", "myFunction1", "myFunction2". I'm using this to change the styling. My question is whether I can use a loop so i only need to use one function instead of three?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style type="text/css">.collapse {
display: none;
}
.collapse.in {
display: block;
}
.title {
background-color: #005FAA;
border: none;
border-radius: 0;
padding: 30px;
}
.title:hover {
background-color: #009cde;
border: none;
border-radius: 0;
padding: 30px;
}
.container{
margin-top:25px;
float:left;
width: 32%;
margin-right: 2%;
}
.container:last-child{
margin-right:0px;
width:32%;}
#media only screen and (max-width: 800px) {
.container{
margin-top:15px;
width: 100%;
}
.container:last-child{
margin-top:15px;
width: 100%;
}
}
.titleselected{
background-color: #009cde;
border:none;
border-radius:0;
padding: 30px;
}
</style>
<div>
<div class="container">
<div class="title" data-toggle="collapse" href="#collapse" id="titleselected0" onclick="myFunction0()">
<h4>System Information</h4>
</div>
<div class="collapse" id="collapse" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
<div style="color:white; padding: 30px;border:none;">
<p><strong>TestingTestingTestingTestingTestingTestingTesting</strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
</ul>
<p><strong>TestingTestingTestingTestingTestingTestingTesting: </strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="title" data-toggle="collapse" href="#collapse2" id="titleselected1" onclick="myFunction1()">
<h4>Product Specification</h4>
</div>
<div class="collapse" id="collapse2" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
<div style="color:white; padding: 30px;border:none;">
<p><strong>TestingTestingTestingTestingTestingTestingTesting:</strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="title" data-toggle="collapse" href="#collapse3" id="titleselected2" onclick="myFunction2()">
<h4>Case Study</h4>
</div>
<div class="collapse" id="collapse3" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
<div style="color:white; padding: 30px;border:none;">
<p><strong>TestingTestingTestingTestingTestingTestingTesting: </strong></p>
<ul>
<li>TestingTestingTestingTestingTestingTestingTesting</li>
<li>TestingTestingTestingTestingTestingTestingTesting appeared in the CIBSE Journal</li>
</ul>
</div>
</div>
</div>
</div>
<script>
function myFunction0() {
var element = document.getElementById("titleselected0");
element.classList.toggle("titleselected");
}
function myFunction1() {
var element = document.getElementById("titleselected1");
element.classList.toggle("titleselected");
}
function myFunction2() {
var element = document.getElementById("titleselected2");
element.classList.toggle("titleselected");
}
</script>
Those elements already have a class of title, so you can just loop over all .title elements and attach the listener:
document.querySelectorAll('.title').forEach((element) => {
element.addEventListener('click', () => {
element.classList.toggle("titleselected");
});
});
(feel free to delete all of their ids and the inline attribute onclick handlers - best to attach listeners with Javascript, not HTML)
You could also use event delegation on the container which has all .titles:
<div class="container-for-all">
<div class="container">
...
</div>
<div class="container">
...
</div>
<!-- etc -->
and
document.querySelector('.container-for-all').addEventListener('click', ({ target }) => {
const closestTitle = target.closest('.title');
if (!closestTitle) {
return;
}
closestTitle.classList.toggle('titleselected');
});
I have hundreds of html-based journal articles that contain html snippets like the example below to reference images:
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe"><!-- named anchor --></a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png">
<div class="long-desc" />
<a target="xrefwindow" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" id="ID0ELD">https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png</a>
<div class="permissions">
<p class="copyright" />
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</a>
</div>
On document ready, using JavaScript and CSS3 how can I show the thumbnail image contained in the first 'a' tag, along with the contents of the 'long-desc' and 'permissions' divs beneath... and then when the thumbnail is clicked, open the image in the second (daughter) 'a' tag in a modal that fills the screen (and has a close button)?
Check this out. You can edit styles as you need for your purpose. It is just a sketch.
document.addEventListener('DOMContentLoaded', function() {
let thumbnail = document.querySelector('.thumbnail');
let close = document.querySelector('.modal-close');
let overlay = document.querySelector('.overlay');
thumbnail.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.add('visible')
});
close.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.remove('visible')
});
});
.thumbnail-image {
border: 3px solid #BBB;
border-radius: 4px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.overlay.visible{
display:block;
}
.modal-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.modal-image {
height: calc(100vh / 1.28);
width: 100vh;
margin: auto;
}
.modal-image>img {
max-width: 100%;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
border: 2px solid #444;
background: #bbb;
cursor: pointer;
}
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe">
<!-- named anchor -->
</a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="#" class="thumbnail">
<img class="thumbnail-image" src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png" alt="show full image" title="show full image" />
</a>
<div class="long-desc">
<div class="permissions">
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</div>
<div class="overlay">
<div class="modal-wrapper">
<div class="modal-image">
<img src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" alt="full image" title="full image" />
</div>
<div class="modal-close">X</div>
</div>
</div>
</div>
How can I put these buttons side by side and centered?
The are way to long and one on top of the other.
I've tried different bootstrap classes, but I can't find the one that is going to align them under the quote.
$(document).ready(function() {
/*getting random quote on button click*/
$('#getMessage').on("click", function() {
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&"+new Date().getTime(), function(json) {
console.log(json[0].content)
console.log(json[0].title)
// var quoteArr = json.contents.quotes[0])
$("#quote-content").html(json[0].content);
$("#quote-author").html("--"+json[0].title);
$(".social-button").toggle();
});
});
});
body {
background-color: #334551;
}
.container {
padding-top: 50px;
}
.header_text {
font-family: 'Allura';font-size: 50px;
color: green;
}
.sub_text {
font-family: 'Allura';font-size: 30px;
}
#getMessage {
font-size: 18px;
}
.social-button {
with: 120px;
margin: 10px;
visibility: block;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: green;
border-width: 5px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 18px;
}
<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Welcome to Daily Quotes!</h1>
<div class="row col-lg-12 text-centered">
<img class="image center" src="http://pctechtips.org/quotes/aristoteles.jpg">
</div>
<div class="row">
<p class="col-lg-12 sub_text text-center text-primary">Press the button for a famous quote!...</p>
</div>
<div class="col-md-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-lg-8 offset-lg-2">
<div id="quote-content" class="row col-lg-12 text center"></div>
<div id="quote-author" class="row col-lg-12 text center"></div>
</div>
<div class="col-xs-6 social-button center">
<a class="btn btn-info btn-block btn-social btn-twitter">
<i class="fa fa-twitter"> Twitter</i>
</a>
<a class="btn-primary btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"> Facebook</i>
</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
-- this is your row with text
</div>
<div class="row">
<div class="col-xs-6">
-- this is half the next row for button 1
</div>
<div class="col-xs-6">
-- this is half the next row for button 2
</div>
</div>
</div>
</div>
this is just basic bootstrap classes
on row will be col-xs-12 that will take up the entire screen for the text
then the next row for the two buttons will be in another row , each of these col-xs-6 that means each one will take up 50% of the width of the screen
I would like to have three columns on my page, but column2 should initially have a size of column size of 0, ie col-md-0. When the user clicks on a link in the navigation bar, I would like column2 to expand to col-md-3, and column3 should shrink to adjust.
For example, this is what I would imagine my columns' html to be when the page is loaded:
<div class="container-fluid">
<div class="row no-gutter">
<div id="col1" class="col-md-1">
<vs-navbar></vs-navbar>
</div>
<div id="col2" class="col-md-0">
<router-outlet></router-outlet>
</div>
<div id="col3" class="col-md-11">
<div class="placeholder">
</div>
</div>
</div>
</div>
The navbar could be:
<nav class="navbar navbar-inverse navbar-full">
<ul class="nav nav-stacked">
<li>
<a>Home</a>
</li>
<li>
<a>Info</a>
</li>
</ul>
</nav>
When the Info link is clicked, I would like the html to transition to:
<div class="container-fluid">
<div class="row no-gutter">
<div id="col1" class="col-md-1">
<vs-navbar></vs-navbar>
</div>
<div id="col2" class="col-md-3">
<router-outlet></router-outlet>
</div>
<div id="col3" class="col-md-8">
<div class="placeholder">
</div>
</div>
</div>
</div>
I have a vague but messy idea how this could be done with some javascript, but I've seen this kind of thing on several sites so I'm looking for the clean, recommended way of doing this, especially as I'm using bootstrap.
Because you have IDs, I assume you now the exact structure of your row.
If it is so, a solution can be based on toggleClass:
$('a:contains("Info")').on('click', function(e) {
$('#col2').toggleClass('col-md-0 col-md-3')
$('#col3').toggleClass('col-md-11 col-md-8')
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-full">
<ul class="nav nav-stacked">
<li>
<a>Home</a>
</li>
<li>
<a>Info</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row no-gutter">
<div id="col1" class="col-md-1">
<vs-navbar>aaaaaa</vs-navbar>
</div>
<div id="col2" class="col-md-0">
<router-outlet>bbbbbb</router-outlet>
</div>
<div id="col3" class="col-md-11">
<div class="placeholder">cccc
</div>
</div>
</div>
</div>
You can use the :target pseudo-class for this.
The :target pseudo-class is used to style an element that is the
target of an internal link in a document.
Basically you hide your column, then when the user clicks the link it will show up:
#col2{
display: none;
}
#col2:target{
display: block;
}
CODE SNIPPET:
.row {
display: flex;
}
.col {
background-color: dodgerblue;
flex: 0 0 30%;
height: 100px;
}
.col:nth-child(odd) {
background-color: gold;
}
#col2 {
display: none;
animation: open 300ms linear both;
}
#col2:target {
display: block;
}
#keyframes open {
0 {
transform: rotateX(0);
}
55% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(180deg);
}
}
Trigger Col 2
<div class="row">
<div id="col1" class="col"></div>
<div id="col2" class="col"></div>
<div id="col3" class="col"></div>
</div>
EDIT:
To change between .col-md-8 and .col-md-11, you can change the width of .col-md-8when your second column is not present, using the corresponding media query for md viewport.
#media (min-width: 992px) {
#col2 + .col-md-8 {
width: 91.66666667%;
}
#col2:target + .col-md-8 {
width: 66.66666667%;
}
}
Bootstrap demo:
div[class*="col"],
div[class^="col"] {
height: 100px;
}
#col1 {
background-color: gold;
}
#col3 {
background-color: purple;
}
#col2 {
background-color: dodgerblue;
display: none;
animation: open 300ms linear both;
}
#col2:target {
display: block;
}
#media (min-width: 992px) {
#col2 + .col-md-8 {
width: 91.66666667%;
}
#col2:target + .col-md-8 {
width: 66.66666667%;
}
}
#keyframes open {
0 {
transform: rotateX(0);
}
55% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(180deg);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Trigger Col 2
<div class="container-fluid">
<div class="row no-gutter">
<div id="col1" class="col-md-1">
<vs-navbar></vs-navbar>
</div>
<div id="col2" class="col-md-3">
<router-outlet></router-outlet>
</div>
<div id="col3" class="col-md-8">
<div class="placeholder">
</div>
</div>
</div>
</div>