Develop Reference

width of an element within display table element (spoiler) forces word wrapping

I have a spoiler with display:table for width to be auto shrinkend to contents.
Now padding (padding: 1rem 3% 0.3rem 3%;) in spoiler contents forces the longest line to wrap, which is not needed.
Transition is also not working.
Creating a nested div haven't solved the problem so far
Is there a way to get transition work and get rid of word wrap?
$(function splr() {
$(".spoiler-toggle").on("click",function(e) {
e.preventDefault();
$(this).parent().toggleClass('open');
var text = (this).firstChild;
text.data = text.data == "Show" ? "Hide" : "Show";
})
$(".spoiler-all").on("click",function(f) {
f.preventDefault();
var slers = document.getElementsByClassName("spoiler-toggle");
var textm = (this).firstChild;
var b=true;
if (textm.data == "Expand all projects") {textm.data = "Hide all projects";} else
{textm.data ="Expand all projects"; b=false;}
for(var i = 0; i < slers.length; i++)
{
var text = slers.item(i).firstChild;
if (b){
if (text.data == "Show") {
//console.log(slers.length);
$(slers.item(i)).parent().toggleClass('open');
text.data = "Hide";}
}
else {
if (text.data == "Hide") {
$(slers.item(i)).parent().toggleClass('open');
text.data = "Show";}
}
}
})
});
.spoiler {
text-align: center;
border-radius: 12px;
background-color: #ccc;
padding: 0 5% 3px 5%;
display: table; margin: 0 auto 1.5rem auto;
/*white-space:nowrap;*/
}
.spoiler-header, .spoiler-toggle {
line-height:normal ;
display: inline-block; vertical-align: middle;
}
.spoiler-toggle {
margin-left: 2rem;
}
.spoiler > .spoiler-content {
display: none;
margin-bottom:1.5rem;
text-align: left;
transition: all 2s;
}
.spoiler.open > .spoiler-content {
border-radius: 6px;
display: block;
background-color: #fff;
margin-top: 2.5rem;
padding: 1rem 3% 0.3rem 3%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p align="center">
<button class="spoiler-all" style="margin: 0.3em 0;cursor:pointer;">Expand all projects</button>
</p>
<div style="max-width:84%;margin: 0 auto">
<div class="spoiler">
<div class="spoiler-header">
<h2 align="center"> First spoiler </h2></div>
<button class="spoiler-toggle">Show</button>
<div class="spoiler-content">
<p> Just some line of text - Problem wrapped</p>
3 Lines of text. wrapping allowed
<p> smaller line of text, no wrapping</p>
6 Lines of text
</div><!-- spoiler content -->
</div> <!-- spoiler -->

How do I create a multilayer accordion menu?

I am trying to create a multilayer or nested accordion menu using pure JavaScript. The whole thing is functioning correctly expect for one issue: when I click on one element of the menu, the entire thing reacts.
This is not for a current project. I am simply trying to expand my knowledge after taking a basic course.
I know the easy-but-bloated way to fix this would be to replicate the functions three times and then specifically target each node (is that even the right word?) in the array. However, I image that would be the wrong way to do things. As you’ll see, I attempted to create a loop for multiple variables. I think this might be my issue because it seems to be the thing that is linking all of them together.
var accordion = document.getElementsByClassName("accordion");
var dropdown = document.getElementsByClassName("dropdown");
var accordionArrow = document.getElementsByClassName("accordionArrow");
var dropdownArrow = document.getElementsByClassName("dropdownArrow");
var content = document.getElementsByClassName("content");
function accordionFunction() {
for (j = 0, k = 0, l = 0, m = 0; j < dropdown.length, k < accordionArrow.length, l < dropdownArrow.length, m < content.length; j++, k++, l++, m++) {
if (dropdown[j].style.maxHeight) {
dropdown[j].style.maxHeight = null;
accordionArrow[k].style.transform = null;
content[m].style.maxHeight = null;
dropdownArrow[l].style.transform = null;
} else {
dropdown[j].style.maxHeight = dropdown[j].scrollHeight + "px";
accordionArrow[k].style.transform = "rotate(-135deg)";
}
}
};
for (var i = 0; i < accordion.length; i++) {
accordion[i].addEventListener("click", accordionFunction);
};
function accordionSubmenu() {
for (l = 0, m = 0; l < dropdown.length, m < content.length; l++, m++) {
if (content[m].style.maxHeight) {
content[m].style.maxHeight = null;
dropdownArrow[l].style.transform = null;
} else {
content[m].style.maxHeight = content[m].scrollHeight + "px";
dropdownArrow[l].style.transform = "rotate(-135deg)";
}
}
};
for (j = 0; j < dropdown.length; j++) {
dropdown[j].addEventListener("click", accordionSubmenu)
};
body {
margin: auto;
width: 600px;
}
div {
margin: auto;
}
.accordion {
background-color: lightblue;
color: white;
padding: 3%;
cursor: pointer;
width: 300px;
height: 50px;
}
.accordion .accordionArrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
}
.dropdown {
color: lightblue;
padding-left: 3%;
cursor: pointer;
width: 300px;
max-height: 0;
overflow: hidden;
transition-duration: 0.2s;
}
.dropdown .dropdownArrow {
border: solid lightblue;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
}
.content {
font-weight: bold;
transition: all 0.2s ease;
padding-left: 5%;
max-height: 0;
overflow: hidden;
}
<div>
<h2 class="accordion">Main 1<i class="accordionArrow"></i></h2>
<h3 class="dropdown">Submenu 1<i class="dropdownArrow"></i></h3>
<p class="content">Hello there. We are exposed.</p>
</div>
<div>
<h2 class="accordion">Main 2<i class="accordionArrow"></i></h2>
<h3 class="dropdown">Submenu 1<i class="dropdownArrow"></i></h3>
<p class="content">Hello there. We are exposed again!</p>
</div>
<div>
<h2 class="accordion">Main 3<i class="accordionArrow"></i></h2>
<h3 class="dropdown">Submenu 1<i class="dropdownArrow"></i></h3>
<p class="content">Hello there. We are exposed thrice!</p>
</div>

With some smart use of the this keyword (the element that triggered the event handler) and the nextElementSibling property you can achieve this in a more elegant way.
I made a class to make elements max-height 0. So now i can hide and show elements by just adding or removing this class.
In the accordion function I toggle this class for the element after the clicked element and remove the class for all others.
In the accordion submenu I just toggle the class on the nextElementSibling.
Personally I would make a different html structure where you can toggle classes easier by using more levels of elements so you would only need 1 function for x amount of submenu's. Maybe a nice new challenge for you.
document.querySelectorAll('.accordion').forEach((accordion) => accordion.addEventListener('click', function() {
//Get All possible hidden elements and loop over it.
document.querySelectorAll('.dropdown, .content').forEach((collapsible) => {
//If current element is the same is the next sibling element of the event target toggle the class. Otherwise add it.
if(collapsible === this.nextElementSibling) {
collapsible.classList.toggle('maxHeightZero');
}
else {
collapsible.classList.add('maxHeightZero');
}
});
}));
document.querySelectorAll('.dropdown').forEach((dropdown) => dropdown.addEventListener('click', function() {
//toggle the nextElementSibling
this.nextElementSibling.classList.toggle('maxHeightZero');
}));
body {
margin: auto;
width: 600px;
}
div {
margin: auto;
}
.accordion {
background-color: lightblue;
color: white;
padding: 3%;
cursor: pointer;
width: 300px;
height: 50px;
}
.accordion .accordionArrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
}
.dropdown {
color: lightblue;
padding-left: 3%;
cursor: pointer;
width: 300px;
overflow: hidden;
transition-duration: 0.2s;
}
.dropdown .dropdownArrow {
border: solid lightblue;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
}
.content {
font-weight: bold;
transition: all 0.2s ease;
padding-left: 5%;
overflow: hidden;
}
.maxHeightZero {
max-height: 0;
}
<div>
<h2 class="accordion">Main 1<i class="accordionArrow"></i></h2>
<h3 class="dropdown maxHeightZero">Submenu 1<i class="dropdownArrow"></i></h3>
<p class="content maxHeightZero">Hello there. We are exposed.</p>
</div>
<div>
<h2 class="accordion">Main 2<i class="accordionArrow"></i></h2>
<h3 class="dropdown maxHeightZero">Submenu 1<i class="dropdownArrow"></i></h3>
<p class="content maxHeightZero">Hello there. We are exposed again!</p>
</div>
<div>
<h2 class="accordion">Main 3<i class="accordionArrow"></i></h2>
<h3 class="dropdown maxHeightZero">Submenu 1<i class="dropdownArrow"></i></h3>
<p class="content maxHeightZero">Hello there. We are exposed thrice!</p>
</div>

On clicking on a specific child a different jQuery should run

I developed a UI where you will click a card it will pop up but inside that card there are two links on which when I click it should not pop back. I know that those links are part of that card and I put an event on the card selector.
So I want to achieve this scenario:
When user clicks on a card no matter where ... it should pops up.. (Its doing it right now) but when user clicks on those two links it should not pop back ... it should show tabs which I will handle myself ... Just need a way that it should not pop back on clicking on those links because I want to fire another event to display tabs on those links.
I tried it with :not but it didn't work for me.
var card = $('.card');
card.click(function() {
if ($(this).hasClass('gravitate')) {
$(this).removeClass('gravitate');
$(this).addClass('levitate');
} else {
$(this).addClass('gravitate');
$(this).removeClass('levitate');
}
});
* {
padding: 0;
margin: 0;
}
body {
padding: 30px;
}
.card {
border: #ececec 1px solid;
padding: 10px;
width: 200px;
margin-bottom: 10px;
}
.tab-pane {
display: none;
}
.transition {
transition: all 500ms
}
.gravitate {
box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0);
width: 200px;
transform: translate(0, 0);
}
.levitate {
box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.3);
width: 220px;
transform: translate(-10px, 5px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card gravitate transition">
<h4>Sample Card</h4>
First Name | Last Name
<div class="tab-pane first-name">Omer</div>
<div class="tab-pane last-name">Hussain</div>
</div>
<div class="card gravitate transition">
<h4>Sample Card</h4>
First Name | Last Name
<div class="tab-pane first-name">Usman</div>
<div class="tab-pane last-name">Ali</div>
</div>

You can add an event handler to your links to check if the parent card has the levitate class and if so, stop the click event from bubbling up the DOM and triggering your other event handler:
$('a.tab').click(function(e) {
if ($(this).parent().hasClass('levitate')) {
e.stopPropagation();
}
})
var card = $('.card');
card.click(function() {
if ($(this).hasClass('gravitate')) {
$(this).removeClass('gravitate');
$(this).addClass('levitate');
} else {
$(this).addClass('gravitate');
$(this).removeClass('levitate');
}
});
$('a.tab').click(function(e) {
if ($(this).parent().hasClass('levitate')) {
e.stopPropagation();
}
})
* {
padding: 0;
margin: 0;
}
body {
padding: 30px;
}
.card {
border: #ececec 1px solid;
padding: 10px;
width: 200px;
margin-bottom: 10px;
}
.tab-pane {
display: none;
}
.transition {
transition: all 500ms
}
.gravitate {
box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0);
width: 200px;
transform: translate(0, 0);
}
.levitate {
box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.3);
width: 220px;
transform: translate(-10px, 5px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card gravitate transition">
<h4>Sample Card</h4>
First Name | Last Name
<div class="tab-pane" class="first-name">Omer</div>
<div class="tab-pane" class="last-name">Hussain</div>
</div>
<div class="card gravitate transition">
<h4>Sample Card</h4>
First Name | Last Name
<div class="tab-pane" class="first-name">Usman</div>
<div class="tab-pane" class="last-name">Ali</div>
</div>

If I understand it right, you want that any click on the card expands/retracts it, but not if the user clicks any of the links. If so, it's as simple as handling the hyperlinks click function separately and preventing the event to propagate. Just add this to your JavaScript:
var cardTabs = $('.tab');
cardTabs.click(function() {
alert("your handler");
return false;
});
You can also use prevent default and stop propagation methods of the click event, which are equivalent (see: event.preventDefault() vs. return false)
var cardTabs = $('.tab');
cardTabs.click(function(e) {
alert("your handler");
e.preventDefault();
e.stopPropagation();
});

onblur event is not firing

I need to fire onblur event when I click outside "aside panel", in order to make the panel close if user clicks outside navigation panel.
Though I'm using React JS - but for simplicity I've written example in pure JavaScript.
Lately I've written something similar and everything works fine, but in this case it's not working, may be because of position fixed.
var d = document.getElementById("fname");
d.addEventListener("blur", myFunction);
function myFunction() {
alert("Input field lost focus.");
}
var state = true;
function myFunction2() {
state = !state;
if (state) {
d.className = "header__aside";
} else {
d.className += " header__aside--open";
}
}
.main {
background-color: violet;
padding: 50px;
}
.header__aside {
background-color: #cfcfcf;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
font-size: 1.2rem;
height: 100%;
opacity: 0.9;
position: fixed;
right: -30%;
top: 0;
transition: right 0.5s ease-out;
width: 30%;
z-index: 10;
}
.header__aside--open {
right: 0;
}
<p class='main'>This example</p>
<button type="button" onClick="myFunction2()">
☰
</button>
<div class="header__aside" id="fname">
<div class="aside-nav">
<div class="aside-nav__header">
<button type="button" class="aside-nav__header-button" onClick="myFunction2()">x</button>
</div>
<nav class="nav nav__aside">
<a class="nav__aside-link active" aria-current="true" href="/">Main</a>
</nav>
</div>
</div>

To have Onblur on an element it should receive focus first, Div elements don't receive focus by default. You can add tabindex="0"
<div tabindex="0" ....
Thanks to Emil, for react you can use
tabIndex={0}

You will have to set a tabindex on the div and manually focus it to get the blur handler invoked
var d = document.getElementById("fname");
d.addEventListener("blur", myFunction);
function myFunction() {
alert("Input field lost focus.");
}
var state = true;
function myFunction2() {
state = !state;
d.focus();
if (state) {
d.className = "header__aside";
} else {
d.className += " header__aside--open";
}
}
.main {
background-color: violet;
padding: 50px;
}
.header__aside {
background-color: #cfcfcf;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
font-size: 1.2rem;
height: 100%;
opacity: 0.9;
position: fixed;
right: -30%;
top: 0;
transition: right 0.5s ease-out;
width: 30%;
z-index: 10;
}
.header__aside--open {
right: 0;
}
<p class='main'>This example</p>
<button type="button" onClick="myFunction2()">
☰
</button>
<div class="header__aside" id="fname" tabindex="0">
<div class="aside-nav">
<div class="aside-nav__header">
<button type="button" class="aside-nav__header-button" onClick="myFunction2()">x</button>
</div>
<nav class="nav nav__aside">
<a class="nav__aside-link active" aria-current="true" href="/">Main</a>
</nav>
</div>
</div>

Add tabindex=0 to the panel-html and focus() to the JS opening the panel:
<div id=panel tabindex=0></div>
document.getElementById('panel').onclick = function(){
document.getElementById('panel').style.display = 'block';
document.getElementById('panel').focus();
document.getElementById('panel').onblur = function(){
document.getElementById('panel').style.display = 'none';
}
}

how to use same popup jquery for two div

how to use same popup jquery for two div. i have a jquery for the popup and it is div popup and i want to use the same jquery for another div. please help. the code is given below
<head>
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<style>
#backgroundPopup {
z-index:1;
position: fixed;
display:none;
height:100%;
width:100%;
background:#000000;
top:0px;
left:0px;
}
#toPopup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #ccc;
border-radius: 3px 3px 3px 3px;
color: #333333;
display: none;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 20%;
width: 800px;
z-index: 2;
}
div.loader {
background: url("../img/loading.gif") no-repeat scroll 0 0 transparent;
height: 32px;
width: 32px;
display: none;
z-index: 9999;
top: 40%;
left: 50%;
position: absolute;
margin-left: -10px;
}
div.close {
background: url("../img/closebox.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
height: 30px;
position: absolute;
right: -27px;
top: -24px;
width: 30px;
}
span.ecs_tooltip {
background: none repeat scroll 0 0 #000000;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: none;
font-size: 11px;
height: 16px;
opacity: 0.7;
padding: 4px 3px 2px 5px;
position: absolute;
right: -62px;
text-align: center;
top: -51px;
width: 93px;
}
span.arrow {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #000000;
display: block;
height: 1px;
left: 40px;
position: relative;
top: 3px;
width: 1px;
}
div#popup_content {
margin: 4px 7px;
/* remove this comment if you want scroll bar
overflow-y:scroll;
height:200px
*/
}</style>
</head>
<body>
<div id="ack" class="topopup">Location</div>
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content" width="400px" height="500px">
<input type="text" name="mm" id="id">
<button id="ok">ok</button>
</div> <!--your content end-->
</div> <!--toPopup end-->
<div class="loader"></div>
<div id="backgroundPopup"></div>
</body>
jquery for popup. i want use this jquery for another div. but i given the same name for another div but i when click that link it displays previous div
jQuery(function($) {
$("a.topopup").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
$("button#ok").click(function() {
disablePopup();
});
$('a.livebox').click(function() {
alert('Hello World!');
return false;
});
/************** start: functions. **************/
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0; // set value
function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7");
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
/************** end: functions. **************/
}); // jQuery End
i want use this jquery for another div. but i given the same name for another div but i when click that link it displays previous div

you never used a <a class="topopup1"></a>?

My suggestiong is that a target attribute can be added to <a> to imply which div will be poped up.
for example:
html code
<a class="popup-button" target="#p1"></a>
<a class="popup-button" target="#p2"></a>
<div class="toPopup" id="p1">...</div>
<div class="toPopup" id="p2">...</div>
js code
$(".popup-button").click(function{
loading($(this).attr("target")); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup($(this).attr("target")); // function show popup
}, 500); // .5 second
});
function loading(selector) {
$(selector).show();
}
function loadPopup(selector) {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$(selector).fadeIn(0500); // fadein popup div
popupStatus = 1; // and set value to 1
}
}

Use class name with your anchor tags
<a class='topopup1'>Show Popup</a>