Develop Reference

Make Bootstrap 4 dropdown have dynamic height

I am trying to make Bootstrap 4 dropdown have this style: slinky.js.org
This is what I have by now: https://codepen.io/nht910/pen/yLexeEM
Main code:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="main-container">
<div class="menu-container">
<div class="menu-1">
<span>Link-1</span>
<button class="button-1">arrow-1</button>
</div>
<div class="menu-2">
<span>Link-2</span>
<button class="button-2">arrow-2</button>
</div>
</div>
<div class="submenu-container">
<div class="submenu-1"> <!-- submenu of .menu-1 -->
<div class="arrow-back">
<button class="button-back-1">Arrow back 1</button>
</div>
<div>
<span>Child 1</span>
</div>
</div>
<div class="submenu-2"> <!-- submenu of .menu-2 -->
<div class="arrow-back">
<button class="button-back-2">Arrow back 2</button>
</div>
<div>
<span>Child 2</span>
</div>
</div>
</div>
</div>
</div>
To make dropdown has slide effect:
I set two classes .submenu-1 and .submenu-2 to display: none, and when user click on arrow button, corresponding submenu will be shown and slide to it.
when user click on arrow back, it will slide back to main menu, and after finish sliding effect, it will hide submenu.
That is what I have for now. But I don't know how to resize dropdown's height to fit content inside it (dynamic height) like slinky.js.org.
Thank you so much.

Try using hide & code when you click.
you can simply do it by using jQuery
$("selector").hide() & $("selector").show()
when user clicks your custom buttons

Solution: https://codepen.io/nht910/pen/OJMobEm
I change height of dropdown using JS with .submenu-1 is the content I want dropdown to fit:
$('.dropdown-menu').height($('.submenu-1').outerHeight());
But it got one problem. At the first time I click on arrow button (it is the first time height of dropdown changed), the transition animation doesn't work. But after that, it work perfectly. So I add another line at global to make the first time that height is changed happen on page load. And now it work perfectly for me.

Microsoft Edge not immediately redrawing element after class change

On my React site, I have a profile/account dropdown (similar to Github's, where you click on your profile picture and a dropdown appears). On most browsers, it works correctly. When the div is clicked, it applies the dropdown--active class to itself. This dropdown--active class contains a rule for the child element, dropdown__content, to change its display from none to block, thereby toggling the display of the dropdown content on click.
Before click:
<div class="dropdown account-dropdown">
<a href="/#" class="dropdown__trigger ">
<span class="account-dropdown--name">admin</span>
</a>
<div class="dropdown__content">
<div class="account-dropdown--identity account-dropdown--segment">
Signed in as admin
</div>
</div>
</div>
After click:
<div class="dropdown dropdown--active account-dropdown">
<a href="/#" class="dropdown__trigger ">
<span class="account-dropdown--name">admin</span>
</a>
<div class="dropdown__content">
<div class="account-dropdown--identity account-dropdown--segment">
Signed in as admin
</div>
</div>
</div>
However, the only way I can get it to display in Microsoft Edge is to click some where else on the screen after I've already clicked the parent element. With Inspect Element open, I can tell that the class is in fact being applied immediately after click, but the child element is not redrawn/reevaluated until some where else on the screen is clicked. Alternatively, tabbing to the element and clicking "enter" does not cause this problem.
Works in Chrome, IE 11, Firefox fine though.

Trigger lightbox functionality on button click jQuery

I've searched all over and I'm unable to get this to work. I've got a button which I want to use as the main control to load up a lightbox image.
Here is my HTML
<li class="span1">
<a href="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_b.jpg" title="FLAG4_km003" class=" thumbnail" target="_blank" data-lightbox="lightbox">
<img alt="FLAG4_km003" src="https://farm4.static.flickr.com/3760/18492500814_4597807b9e_z.jpg">
</a>
<div class="hover-box">
<p>Title</p>
<button class="view box-button">Zoom</button>
<button class="request box-button">Request</button>
</div>
</li>
As you can see the required lightbox link is in place but I want to trigger the click of it when a user clicks on the 'Zoom' button.
Here is my jQuery which currently isn't working:
$(document).on('click', '.view', function(){
$(this).closest("li.span1 a").click();
});

closest doesn't work like that. It selects the first/closest matching parent of the element. You should at first select the closest li element and then select the child/descendant a element.
$(this).closest("li.span1").children('a').click();
You could also use the parent and siblings methods for selecting the target element:
$(this).parent("div.hover-box").siblings('a.thumbnail').click();

Use jQuery to show an element whose parent is hidden

How do I show a fixed position element, when it's parent element is hidden (display: none)?
My scenario.
I have a bottom, fixed toolbar with five buttons across the bar. One of those buttons is a More/Less button that expands and retracts the toolbar showing even more buttons. Inside each button div is a panel element. So, when a button is clicked its panel element is shown and moved so that it sits above the selected button.
Here is some sample markup:
<div id="dashbar" class="dashbar">
<div id="dashbar-apps" class="dashbar-apps">
<!-- The More/Less Button -->
<!-- My First Button -->
<div id="dash-projects" class="dash-button">
<i class="fa fa-area-chart fa-fw icon"></i>
My Projects
<ul class="dash-menu" id="dash-projects-menu">
<li>Some</li>
<li>Links</li>
<li>Here</li>
</ul>
</div>
<!-- Any number of additional appbar buttons -->
</div> <!-- for the appbar that is always visible -->
<div id="app-deck" class="dash-app-deck">
<!-- The exact same markup for the buttons -->
</div>
</div> <!-- for the dashbar as a whole -->
The More/Less button toggles the appdeck visibility with a simple slide animation.
What I want is for someone to be able to expand the dashbar and click one of the buttons in the appdeck portion. Then the toolbar retracts automatically and displays the panel element associated with that button.
Everything works fine except that when the toolbar retracts, it hides the appdeck and (therefore) all the elements inside it -- including the panel element I'm trying to show.
I've played with detaching and moving the element to the body, but that seems excessive. Is there another way to simply show the element when it's parent is hidden?
Thanks.

Hide div when I click any button on my page

So I have this menu and when I click on a button I need to create another div under the menu. I have done that. But when I click on another button on the menu that div is still there and I want it to dissapear/collapse. So how should I do it? What I found until now is how to hide a div when clicking on a specific show/hide button, but I need to hide that div when I click any button on my page...
Any help is highly appreciated.
My code is this but I don't think it is relevant (I am interested in the process, how should I do it):
<div id="container">
<ul id="nav">
<li>Despre noi</li>
<li>Projects</li>
<li>Implica-te</li>
<li>Stiri</li>
<li>Contact</li>
</ul>
</div>
So this is my menu and when I click on projects this div shows up
<div id="menu_lava">
</div>
which is a lavalamp submenu. But how can I make it to collapse when I click on other buttons on my main menu?

Hide all info-div's on a click and just show the sepcific one:
Here's a jsfiddle (using jQuery):
http://jsfiddle.net/FKeAF/1/