Develop Reference

Create toggle menu raw javascript

I'm a little confused about how create a menu with raw javascript, pretty similar like bootstrap dropdown with those interactions:
click on button and show dropdown
click again and hide dropdown
lose focus on dropdown and hide it
I was doing a series of tests and I couldn't find how bootstrap do it!
Somebody has any idea of how does it work?
This what I have:
HTML:
<!-- Menu button -->
<div class="flex align-items-center menu-btn">
<i class="material-icons task-more flex justify-content-center align-items-center" data-toggle="hola">more_horiz</i>
</div>
<!-- Menu -->
<div class="task-menu">
<div class="task-menu-item flex align-items-center">
<i class="material-icons">alarm</i>
<span>Alarms</span>
</div>
<div class="task-menu-item flex align-items-center">
<i class="material-icons">edit</i>
<span>Edit</span>
</div>
<div class="task-menu-item flex align-items-center">
<i class="material-icons">delete</i>
<span>Delete</span>
</div>
</div>
JS:
// Show-hie menu
Array.from(container.querySelectorAll('.task-more')).forEach(function(el){
el.addEventListener('click', function(){
let menu = el.parentNode.parentNode.querySelector('.task-menu');
menu.classList.toggle('display-block');
menu.tabIndex = -1;
menu.focus();
});
});
// Hide on blur
Array.from(container.querySelectorAll('.task-menu')).forEach(function(el){
el.addEventListener('blur', function(){
el.classList.remove('display-block');
}, true);
});
Thanks!

<button id="drop" onclick="drop();">Drop down</button>
<div id="menu">
<!-- content here-->
</div>
Script:
var button = document.querySelector('#drop');//or any other selector like getElementBy...
var menu = document.querySelector('#menu');
function drop() {
setTimeout(function() {
menu.style.display="block";
button.setAttribute('onclick', 'hide();');
}, 10);
};
function hide() {};
document.addEventListener('click', function() {
menu.style.display="none";
});

Show different forms within a modal on click of different buttons

I'm definitely going about this all wrong but there must be a way to simplify this process. I have a modal that contains 4 forms all hidden except one that has a class "active". I need to trigger each individual form based on click events from different buttons ie. sign-up / forgot-password / sign-in etc. so when i click the sign-up button the modal appears with the signup form active, clicking the forgot password just switches the form to show the forgot password. and so on.
my thinking was to create:
function modalSwitch() {
var btnModal = [$('btn-one'),$('btn-two'),$('btn-three'), $('btn-four')];
var formModal = [$('form-one'),$('form-two'),$('form-three'), $('btn-four')];
btnModal.click(function(){
if ( btnModal[].attr('class') === formModal[].attr('data-id')) {
formModal.addClass('active');
}
});
}
modalSwitch();
instead of the on click event for :
function modalSwitch() {
var btnOne = $('.btn-one');
var btnTwo = $('.btn-two');
var btnThree = $('.btn-three');
var btnFour = $('.btn-four');
var btnFive = $('.btn-five');
var btnSix = $('.btn-six');
var modalOne = $('.modal-one');
var modalTwo = $('.modal-two');
var modalThree = $('.modal-three');
var modalFour = $('.modal-four');
var modalFive = $('.modal-five');
var modalSix = $('.modal-six');
btnOne.click(function(){
modalOne.addClass('show');
modalTwo.removeClass('show');
modalThree.removeClass('show');
modalFour.removeClass('show');
modalFive.removeClass('show');
modalSix.removeClass('show');
....
});
}
modalSwitch();
but i'm so lost right now, any help will be appreciated

You can use data-src attribute to achieve this, for example:
<a href="#" class="btn btn-normal open-logs" data-src="my_details" data-heading="My Heading">
Demo
</a>
<div id="my_details" class="hide">
your form here
</div>
Create a css class to hide the div by default.
Something like this to open modal box:
$(document).ready(function() {
$(".open-logs").click(function(e){
e.preventDefault();
var logId = $(this).data('src');
var html = $("#"+logId).html();
$("#myModalLabel").html($(this).data('heading'));
$("#modalBody").html(html);
$("#logModal").modal('show');
});
});

Code below will solve all your query. Code in snippet have an extra set of css and js which will generate bootstrap model for you. You don't need to write conventional and same block of code for all your models.
function simpleSHow(title)
{
var msg=$('#simple-div');
BootstrapDialog.show({
title : title,
message: $('#simple-div'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function complexSHow(title)
{
var msg=$('#complex-div');
BootstrapDialog.show({
title : title,
message: $('#complex-div'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv1(div_id)
{
var msg=$('#lavel-2_div-1');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-1'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv2(div_id)
{
var msg=$('#lavel-2_div-2');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-2'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv3(div_id)
{
var msg=$('#lavel-2_div-3');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-3'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
function showDiv4(div_id)
{
var msg=$('#lavel-2_div-4');
BootstrapDialog.show({
title : 'Level 2 Title',
message: $('#lavel-2_div-4'),
onhide : function(){
$('#hidden-div').append(msg);
}
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/css/bootstrap-dialog.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-dialog.min.js"></script>
<!-- This is a container Div which contains all the div to show when bootstrap dialog opens -->
<div style="display : none" id="hidden-div">
<div id="simple-div">
<h1>This is H1 Heading</h1>
This is most simple coding
<br>
<button type="button" class="btn btn-primary" onclick="showDiv1()">Lavel-2 div-1</button>
<button type="button" class="btn btn-primary" onclick="showDiv2()">Lavel-2 div-2</button>
</div>
<div id="lavel-2_div-1">
<h3>This is Level 2 Header</h3>
<span style="color : blue;">This is Level 2 Message 1</span>
</div>
<div id="lavel-2_div-2">
<h3>This is Level 2 Header</h3>
<span style="color : greenyellow;">This is Level 2 Message 2</span>
</div>
<div id="lavel-2_div-3">
<h3>This is Level 2 Header</h3>
<span style="color : pink;">This is Level 2 Message 3</span>
</div>
<div id="lavel-2_div-4">
<h3>This is Level 2 Header</h3>
<span style="color : green;">This is Level 2 Message 4</span>
</div>
<div class="container-fluid" id="complex-div">
<button type="button" class="btn btn-primary" onclick="showDiv3()">Lavel-2 div-3</button>
<button type="button" class="btn btn-primary" onclick="showDiv4()">Lavel-2 div-4</button>
<h2>Panels with Contextual Classes</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</div>
       
<button type="button" class="btn btn-primary" onclick="simpleSHow('Hello 1234')">Simple Div Show</button>
       
<button type="button" class="btn btn-primary" onclick="complexSHow('Complex 1234')">Complex Div Show</button>

Applying bootstrap accordion functionality on the fly

The non-technical staff at our organisation need to be able to create bootstrap accordions but dont have the skills to create them from scratch. My solution is to allow them to build divs with a class of "accordion-panel" applied and then build the accordion from those divs.
The code I have so far is below but it doesnt apply the actual expand/collapse mechanism. How do I make it work?
<div class="accordion-panel open" id="accordion-panel_open">
<h4>Why did you do that?</h4><p>fasdfqw fasdf asdf asdf</p>
</div>
<div class="accordion-panel" desc="title of this panel" id="accordion-panel">
strong text<h4>No really...Why did you do that?</h4><p><br>dfasd fasdf asdf asdf asdf sadf sdf</p>
</div>
<script>
$(document).ready( function() {
var $code = false;
var $panels = $(".accordion-panel");
if ($panels.length > 0) {
var $panelloc = $panels.last().after('<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">');
var i=1;
$panels.each(function() {
var $this = $(this);
var $heading = $this.find("h4");
var headingtext = $heading.text();
$heading.remove();
var panelcode = '<div class="panel panel-default"><div class="panel-heading" role="tab" id="panel'+i+'"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#info'+i+'" aria-expanded="true" aria-controls="info'+i+'">'+headingtext+'</a></h4></div><div id="info'+i+'" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="panel'+i+'"><div class="panel-body">'+$this.text()+'</div></div></div>';
$("#accordion").append(panelcode);
i++;
$this.remove();
});
}
});
</script>

I'd have them structure their code a little differently like this:
<div id="accordian">
<div class="panel open">
<h4 class="title">Why did you do that?</h4>
<div class="content">
<p>fasdfqw fasdf asdf asdf</p>
</div>
</div>
<div class="panel">
<h4 class="title">title of this panel</h4>
<div class="content">
strong text<h4>No really...Why did you do that?</h4>
<p>dfasd fasdf asdf asdf asdf sadf sdf</p>
</div>
</div>
</div>
This is more definitive with what they want to do, and you're not requiring them to put any functional ids in there, other than "accordian".
Here's the script I'd use:
$('#accordian')
.addClass('panel-group');
$('#accordian .panel')
.addClass('panel-default');
$('#accordian h4.title')
.removeClass('title')
.addClass('panel-title')
.each( function(id){
$(this).wrapInner('<a data-toggle="collapse" data-parent="#accordion" href="#ac' + id + '"></a>');
})
.wrap( '<div class="panel-heading"></div>' );
$('#accordian .content')
.removeClass('content')
.addClass('panel-collapse collapse')
.addClass( function(){
return $(this).parent().hasClass('open') ? 'in':'';
})
.each( function(id){
$(this).attr('id', 'ac' + id);
})
.wrapInner('<div class="panel-body"></div>');
Here's a jsfiddle:
https://jsfiddle.net/mckinleymedia/hshqgvk8/

How to set class active to div?

I have this menu in this fiddle and I want to set active div on click:
<div class="account-item">
<div class="account-heading active">
<h4 class="account-title">
2. TRANSACTION_HISTORY
</h4>
</div>
</div>
I have this script but i get selected all divs
function SetActiveDiv()
{
var element = $("a").parent().parent();
if (element.hasClass("active")) {
element.removeClass("active");
} else {
element.addClass("active");
}
}

You need to pass the clicked element reference
1.MY_TICKETS
then
function SetActiveDiv(el) {
var element = $(el).closest('.account-heading');
element.toggleClass("active");
}
Demo: Fiddle
Note: Since you are using jQuery, try to use jQuery event handlers instead of inline handlers
So
1.MY_TICKETS
then
jQuery(function ($) {
$('.account-group .account-title a').click(function () {
var $heading = $(this).closest('.account-heading').toggleClass("active");
$('.account-group .account-heading.active').not($heading).removeClass('active');
})
})
Demo: Fiddle

just make the selector to look like (double class selector):
var element = $(".account-heading.active");

You need to take a look at your code and understand what it is doing. Take the following line:
$("a").parent().parent();
What does this do? It selects every anchor, then selects the parent, then selects the parent of that parent.
Considering you're using jQuery, you can use it to bind the event handler instead of using onClick in your html (which is considering bad practice).
$('a').on('click', function() {
$('.account-heading').removeClass('active');
$(this).parent().parent().addClass('active');
});
jsFiddle: http://fiddle.jshell.net/jxmbj36s/5/

Remove all the functions in html onclick="SetActiveLink('#/*')" and then use this jQuery function so you will not be repetitive:
$(".account-group a").on("click", function(){
$(".account-group a").removeClass("active");
$(this).addClass("active");
});
See the result here:
$(".account-group a").on("click", function(){
$(".account-group a").removeClass("active");
$(this).addClass("active");
});
.active {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 col-md-3 left-sidebar-container">
<div class="left-sidebar">
<div class="account">
<h1>MY_ACCOUNT</h1>
<div class="account-group" id="accordion">
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
1.MY_TICKETS
</h4>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
2. TRANSACTION_HISTORY
</h4>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
3. PAYIN
</h4>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
4.PAYOUT
</h4>
</div>
</div>
<div class="account-item">
<div class="account-heading active">
<h4 class="account-title has-sub">
<a data-toggle="collapse" data-parent="#accordion" href="#settings">5.SETTINGS</a>
</h4>
</div>
<div id="settings" class="account-collapse collapse in">
<div class="account-body">
PERSONAL_INFORMATION
NOTIFICATIONS
CHANGE_PASSWORD
GAME_SETTINGS
</div>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title has-sub">
<a data-toggle="collapse" data-parent="#accordion" href="#promotions">6.PROMOTIONS</a>
</h4>
</div>
<div id="promotions" class="account-collapse collapse">
<div class="account-body">
BONUSES
COMPETITIONS
VOUCHER_REDEEM
</div>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
7. SYSTEM_MESSAGES
</h4>
</div>
</div>
</div>
</div>
</div>
</div>

I think that the following code will help you to solve this problem
function SetActiveDiv() {
var el = $("a").closest("div.account-heading")[0];
var el = $("a").parent().parent();
if ($(el).hasClass('active')) {
$(el).removeClass('active')
} else {
$(el).addClass('active')
}
}

Collapse in the first if the latest closed

I am taking bootstrap3's collapse tools. http://getbootstrap.com/javascript/#collapse
but I want that if all closed, the first div should open again, so that no spare space will be there if all are closed.
this is what i tried, but this is working only once and for the second time, it is not opening the first. any ideas why?
$(function(){
$('#four').on('click', function () {
var four_class = $('#collapseFour').attr("class");
if(four_class=="panel-collapse in"){
$('#collapseOne').collapse();
}
});
});
my fourth content
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle lead" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" id="four">
Locations eintragen
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
fourth content
</div>
</div>
</div>

You need to watch the hidden.bs.collapse event which is broadcast when a panel has closed.
In there you check if the number of panels is equal to the number of closed panels and if so open the first one..
$('#accordion').on('hidden.bs.collapse', function (item) {
// after closing check if any is still open
var self = $(this),
collapsed = self.find('.collapsed'),
all = self.find('.panel-title'),
allClosed = collapsed.length === all.length;
if (allClosed){
setTimeout(function(){
self.find('.panel-collapse').first().collapse('show');
}, 10);
}
})