We Keep Coding

How to impose CSS changes to related sibling element?

Basically I have multiple parent div with pairs of button and div child elements.
What I want to do is impose changes to the "related" div when a button is clicked. So if Button 2 is clicked, the changes should be imposed on toast 2.
My issue is that no matter the button clicked it's only the first occurrence that is changed.
In my example I set the click to change the display value of the relevant element as an example, but in reality any CSS change should be possible.
Here is a link to a complete and functional codepen as well.
function hide() {
var element = document.querySelector('.toast');
element.style.display = (element.style.display == 'none') ? 'block' : 'none';
}
.parent {
position : relative;
display : inline-block;
height : 55px;
}
button#button {
width : 100px;
height : 35px;
}
.toast {
display : block;
position : absolute;
top : 40px;
background-color : black;
}
<div class="parent">
<button id="button" onclick="hide()">Button 1</button>
<div class="toast">A box with text</div>
</div>
<div class="parent">
<button id="button" onclick="hide()">Button 2</button>
<div class="toast">A box with text</div>
</div>
<div class="parent">
<button id="button" onclick="hide()">Etc...</button>
<div class="toast">A box with text</div>
</div>

Don't duplicate IDs
Avoid using onclick attributes. They have a number of drawbacks and addEventListener makes this easier.
Pay attention to the event object that is passed to your listener. It will tell you where the click was.
Navigate up (using closest) and down (using querySelector) the DOM from that element
function hide(event) {
// We're using event delegation so if the click isn't from a button we stop immediately
if (!event.target.matches(".parent button")) {
return false;
}
// Seach from the button up until we find the parent
const parent = event.target.closest(".parent");
// Search down from the parent until we find the toast
const toast = parent.querySelector('.toast');
toast.style.display = (toast.style.display == 'none') ? 'block' : 'none';
}
addEventListener('click', hide);
.parent {
position: relative;
display: inline-block;
height: 55px;
}
.parent button {
width: 100px;
height: 35px;
}
.toast {
display: block;
position: absolute;
top: 40px;
background-color: black;
}
<div class="parent">
<button>Button 1</button>
<div class="toast">A box with text</div>
</div>
<div class="parent">
<button>Button 2</button>
<div class="toast">A box with text</div>
</div>
<div class="parent">
<button>Etc...</button>
<div class="toast">A box with text</div>
</div>

How to show only one div at the time?

I've got three sections, inside of which there are two divs. Inside the first one I have a button and after clicking it I should have the next one opened. However, only one div should be visible at the time (so when you click the next one, previous one should be closed). And I've got this functionality, but after clicking on the button again - it doesn't close the corresponding div.
I set up an example of my problem on codepen:
https://codepen.io/hubertstrawa/pen/abOwWMJ
<section>
<div class="product">
<span class="btn">Show more</span>
<p>Lorem ipsum</p>
</div>
<div class="product-more displayNone">
Test
</div>
</section>
$('.btn').click(function(e) {
// only one div to be shown but can't be closed as well.
$('.product-more').each(function(i, v) {
$(this).removeClass('displayBlock');
$(this).addClass('displayNone');
})
if ($(e.target).parent().next().hasClass('displayNone')) {
$(e.target).parent().next().removeClass('displayNone');
$(e.target).parent().next().addClass('displayBlock');
} else {
$(e.target).parent().next().removeClass('displayBlock');
$(e.target).parent().next().addClass('displayNone');
}
});
Any ideas how can I make it work?
Thank you

Change a .is-open on a parent element.
<section class="product is-open"> <!-- is-open toggled by JS -->
<div class="product-more"></div> <!-- handle children styles using CSS -->
</section>
.product-more { display: none; } /* default */
.product.is-open .product-more { display: block; } /* when ancestor is .is-open*/
Use delegateTarget inside the .on() method to get back the .product delegator element
const $product = $('.product'); // Collect all current products
$product.on('click', '.btn', function(e) {
const $thisProd = $(e.delegateTarget); // The .product delegator
$product.not($thisProd).removeClass('is-open'); // Handle all (but not this)
$thisProd.toggleClass('is-open'); // Handle current
});
/* QuickReset */ * {margin: 0; box-sizing: border-box;}
.product {
background-color: #ededed;
width: 400px;
margin: 0 auto;
margin-bottom: 1rem;
}
.product-title {
position: relative;
padding: 1rem;
}
.product .btn {
position: absolute;
bottom: 0;
right: 0;
padding: .7rem;
background-color: cyan;
cursor: pointer;
}
.product-more {
width: 100%;
padding: 1rem;
background-color: cyan;
display: none; /* by default */
}
.product.is-open .product-more {
display: block;
}
<section class="product">
<div class="product-title">
<p>Lorem ipsum</p>
<span class="btn">Show more</span>
</div>
<div class="product-more">Test</div>
</section>
<section class="product">
<div class="product-title">
<p>Lorem ipsum</p>
<span class="btn">Show more</span>
</div>
<div class="product-more">Test</div>
</section>
<section class="product">
<div class="product-title">
<p>Lorem ipsum</p>
<span class="btn">Show more</span>
</div>
<div class="product-more">Test</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
This is preferred, since it lets you change HTML and CSS, and not worry any more about JavaScript - whilst by using .prev(), .next() or .parent() (like the other answers suggest) JS is just waiting for you to change the markup - to break.
No need to traverse back and forth your selectors.
No need for .displayNone and .displayBlock on the product-more element.
Handling dynamic .product
if your .product are dynamic elements, here's another solution to the above concept:
$('.allProducts').on('click', '.btn', function(e) {
const $product = $(e.delegateTarget).find('.product'); // Get all .product
const $thisProd = $(this).closest('.product'); // The closest .product ancestor
$product.not($thisProd).removeClass('is-open'); // Handle all (but not this)
$thisProd.toggleClass('is-open'); // Handle current
});
/* QuickReset */ * {margin: 0; box-sizing: border-box;}
.product {
background-color: #ededed;
width: 400px;
margin: 0 auto;
margin-bottom: 1rem;
}
.product-title {
position: relative;
padding: 1rem;
}
.product .btn {
position: absolute;
bottom: 0;
right: 0;
padding: .7rem;
background-color: cyan;
cursor: pointer;
}
.product-more {
width: 100%;
padding: 1rem;
background-color: cyan;
display: none; /* by default */
}
.product.is-open .product-more {
display: block;
}
<div class="allProducts">
<section class="product">
<div class="product-title">
<p>Lorem ipsum</p>
<span class="btn">Show more</span>
</div>
<div class="product-more">Test</div>
</section>
<section class="product">
<div class="product-title">
<p>Lorem ipsum</p>
<span class="btn">Show more</span>
</div>
<div class="product-more">Test</div>
</section>
<section class="product">
<div class="product-title">
<p>Lorem ipsum</p>
<span class="btn">Show more</span>
</div>
<div class="product-more">Test</div>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

You can use the toggleClass it will detect your class and change it to another.
In your each function you just need to set all items to be hide and then it will toggle classes for current item.
Codepen
https://codepen.io/nasser-ali-karimi/pen/rNVwwLy?editors=1010
$('.btn').click(function(e) {
// only one div to be shown but can't be closed as well.
$('.product-more').each(function(i, v) {
$(this).removeClass('displayBlock');
$(this).addClass('displayNone');
})
$(e.target).parent().next().toggleClass('displayNone displayBlock');
});

A shorter version using jQuery would be using hide() and toggle():
$('.btn').click(function(e) {
var more = $(e.target).parent().next() ;
$('.product-more').not(more).hide();
$(e.target).parent().next().toggle();
});

You are hiding all the product-more sections when clicking any btn button, and then, trying to show/hide the product-more section associated with the clicked button.
So, when the section product-more is already shown and you click its btn button what happens is that you first hide the associated section and then your code checks if it is not visible and then shows its again.
One possible solution is to discard the associated product-more section when hiding. Also, as divs are shown by default, you don't need the displayBlock class.
$('.btn').click(function(e) {
var $current = $(e.target).parent().next('.product-more');
// Hide all sections that are not the one associated to the current button.
$('.product-more').not($current).addClass('displayNone');
// Show or hide current section.
$current.toggleClass('displayNone');
});

Hide and show DIV with javascript parameter

I am trying to do an event for hide and show with pure Javascript string parameters. I want to hide the other div once one of them is displayed (Let's say there are multiple div).
I tried to do it my own but I only managed to display once clicked. I had no idea how to hide the rest and only show that specified div.
Below is my code:
function show(id) {
if (document.getElementById('div_'+id).style.display == 'none') {
document.getElementById('div_'+id).style.display = 'block';
}
return false;
}
.title {
border:1px solid red;
display: inline-block;
font-size: 16px;
}
.content {
border: 1px solid blue;
display: inline-block;
font-size: 16px;
width: 300px;
}
<div class="title" onclick="show('first');">Title 1</div>
<div class="content" id="div_first" style="display:none;">Content 1
</div>
<div class="title" onclick="show('sec');">Title 2</div>
<div class="content" id="div_sec" style="display:none;">Content 2
</div>

You can use data-* attribute to store the target selector.
Don't use inline on* handlers. Keep your JS in one place.
Use CSS .is-active to manipulate the visibility state like display: block;
const showBtn = document.querySelectorAll('[data-show]');
const content = document.querySelectorAll('.content');
function show(ev) {
const selector = ev.currentTarget.getAttribute('data-show');
const elToShow = document.querySelectorAll(selector);
content.forEach(el => el.classList.remove('is-active'));
elToShow.forEach(el => el.classList.add('is-active'));
}
showBtn.forEach(el => el.addEventListener('click', show));
.title {
border:1px solid red;
display: inline-block;
font-size: 16px;
}
.content {
border: 1px solid blue;
display: inline-block;
font-size: 16px;
width: 300px;
display: none; /* ADD THIS */
}
.content.is-active{ /* ADD THIS */
display: block;
}
<div class="title" data-show="#content-1">Title 1</div>
<div class="title" data-show="#content-2">Title 2</div>
<div class="content" id="content-1">Content 1</div>
<div class="content" id="content-2">Content 2</div>

Just keep track of the id or element that is being displayed so that you can hide it if another one is selected. There's no need to iterate over them to hide them all, as you will know which one is being displayed, or to query the DOM each time to get the current one, as you can just keep a reference to it the first time.
I have updated the logic to toggle them if you click the same one twice and removed the inline event listeners, which I've moved to JS.
Note I have also replaced the <div>s for the .title elements with <button>s, as they will work better with keyboard navigation, mouse events and screen readers. You could also use <a>s instead.
let currentContentTab = null;
function show(e) {
// Using e.target you can get a reference to the clicked button:
const contentTab = document.getElementById(`div${ e.target.id.substring(3) }`);
const isHidden = contentTab.style.display === 'none';
// Toggle the panel we have just clicked (assuming you want to allow closing all of them again):
contentTab.style.display = isHidden ? 'block' : 'none';
// Hide the previous one, if any:
if (currentContentTab) {
currentContentTab.style.display = 'none';
}
// Keep track of the one we are currently displaying:
currentContentTab = isHidden ? contentTab : null;
}
// No need to have inline JS, you can bind the event listeners from JS:
for (const button of document.querySelectorAll('.title')) button.onclick = show;
body {
font-family: monospace;
font-size: 16px;
}
.title {
font-family: monospace;
font-size: 16px;
border: 1px solid red;
background: transparent;
padding: 8px;
outline: none;
}
.content {
border: 1px solid blue;
width: 300px;
padding: 8px;
margin-top: 8px;
}
<button class="title" id="tab1">Title 1</button>
<button class="title" id="tab2">Title 2</button>
<button class="title" id="tab3">Title 3</button>
<button class="title" id="tab4">Title 4</button>
<div class="content" id="div1" style="display:none; ">
Content 1...
</div>
<div class="content" id="div2" style="display:none; ">
Content 2...
</div>
<div class="content" id="div3" style="display:none; ">
Content 3...
</div>
<div class="content" id="div4" style="display:none; ">
Content 4...
</div>
If accessibility is important for you, you might want to add some ARIA attributes and the HTML hidden attribute:
let currentTab = null;
let currentPanel = null;
function show(e) {
const tab = e.target;
const id = tab.getAttribute('aria-controls');
const panel = document.getElementById(id);
// Toggle the panel we have just clicked:
tab.toggleAttribute('aria-selected');
panel.toggleAttribute('hidden');
// Hide the previous one, if any:
if (currentTab) {
currentTab.removeAttribute('aria-selected');
currentPanel.setAttribute('hidden', true);
}
// Keep track of the one we are currently displaying:
if (currentTab === tab) {
currentTab = null;
currentPanel = null;
} else {
currentTab = tab;
currentPanel = panel;
}
}
for (const button of document.querySelectorAll('.title')) button.onclick = show;
body {
font-family: monospace;
font-size: 16px;
}
.title {
font-family: monospace;
font-size: 16px;
border: 1px solid red;
background: transparent;
padding: 8px;
outline: none;
}
.content {
border: 1px solid blue;
width: 300px;
padding: 8px;
margin-top: 8px;
}
<button class="title" role="tab" aria-selected="true" aria-controls="div1" id="tab1">Title 1</button>
<button class="title" role="tab" aria-selected="true" aria-controls="div2" id="tab2">Title 2</button>
<button class="title" role="tab" aria-selected="true" aria-controls="div3" id="tab3">Title 3</button>
<button class="title" role="tab" aria-selected="true" aria-controls="div4" id="tab4">Title 4</button>
<div class="content" id="div1" role="tabpanel" aria-labelby aria-labelledby="tab1" hidden>
Content 1...
</div>
<div class="content" id="div2"role="tabpanel" aria-labelby aria-labelledby="tab2" hidden>
Content 2...
</div>
<div class="content" id="div3"role="tabpanel" aria-labelby aria-labelledby="tab3" hidden>
Content 3...
</div>
<div class="content" id="div4"role="tabpanel" aria-labelby aria-labelledby="tab4" hidden>
Content 4...
</div>

This JS code will grab all .content divs and will hide them unless it's the one we clicked.
function show(id) {
const el = document.getElementById('div' + id);
if (el.style.display == 'none') {
el.style.display = 'block';
}
const otherEls = document.querySelectorAll('.content');
otherEls.forEach(function (elItem) {
if (el !== elItem) {
elItem.style.display = 'none';
}
});
return false;
}

My solution as the following:
function show(id)
{
var divs=document.getElementsByClassName("content");
for (i=0;i<divs.length;i++)
{
divs[i].style.display='none';
}
document.getElementById('div_'+id).style.display = 'block';
}
.title {
border:1px solid red;
display: inline-block;
font-size: 16px;
}
.content {
border: 1px solid blue;
display: inline-block;
font-size: 16px;
width: 300px;
}
<div class="title" onclick="show('first');">Title 1</div>
<div class="content" id="div_first" style="display:none;">Content 1
</div>
<div class="title" onclick="show('sec');">Title 2</div>
<div class="content" id="div_sec" style="display:none;">Content 2
</div>

Adding div dynamically using button click in JavaScript / jQuery

How do I dynamically add div on button click in JavaScript/jQuery?
I want all the formatting of div having class "listing listing_ad job".
This is my code which I tried out, using jQuery.
$('#btnAddtoList').click(function(){
var newDiv = $('<div class="listing listing_ad job"><h4><a>Some text</a></h4> </div>');
//newDiv.style.background = "#000";
document.body.appendChild(newDiv);
});
.listing {
border-bottom: 1px solid #ddd;
float: left;
padding: 0 0 5px;
position: relative;
width: 559px;
}
.listing:hover {
background: #f5f5f5 none repeat scroll 0 0;
border-bottom: 1px solid #ddd;
cursor: wait;
}
a:hover {
color: #ff5050;
}
.subtitle {
width: 430px;
font-weight: normal;
font-size: 12px;
font-family: Arial;
color: #7f7f7f;
}
.info {
float: left;
margin: 10px 15px 5px;
min-width: 500px;
clear: both;
color: #7f7f7f;
margin: 15px 44px 15px 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAddtoList">
Add to list
</button>
<div class="listing listing_ad job">
<h4>
<a>
Excellent Opportunity For Internship at Diamond
</a>
</h4>
<div class="subtitle">
Lahore, Punjab
</div>
<div class="info">
This is Info / Description.
</div>
</div>
<!-- ************************ -->
<div class="listing listing_ad job">
<h4>
<!-- Src: http://jobs.mitula.pk/internship-program-lahore-jobs -->
<a>
Excellent Opportunity For Internship at Diamond
</a>
</h4>
<div class="subtitle">
Lahore, Punjab
</div>
<div class="info">
This is Info / Description.
</div>
</div>
Jsfiddle: http://jsfiddle.net/mr4rngbL/3/

Yes, you can - by added jQuery to the script of the document, and wrpping the code in document.ready
$(function() {
$('#btnAddtoList').click(function(){
var newDiv = $('<div class="listing listing_ad job"><h4><a>Some text</a></h4> </div>');
//newDiv.style.background = "#000";
$('body').append(newDiv);
});
});
Example http://jsfiddle.net/mr4rngbL/5/
Example for what you've asked in the comment: http://jsfiddle.net/mr4rngbL/6/
And LAST example based on your request in the comment: http://jsfiddle.net/mr4rngbL/7/

Here Pure JavaScript Solution
function addDiv(parent_div, content, attrs) {
var div = document.createElement('div');
var parent = document.getElementById(parent_div);
for (var key in attrs) {
if (attrs.hasOwnProperty(key)) {
div.setAttribute(key, attrs[key]);
}
}
div.innerHTML = content;
if (parent) {
parent.appendChild(div);
}
}
var button = document.getElementsByTagName('button')[0];
if (button) {
button.addEventListener('click', function() {
// change dynamically your new div
addDiv('parent', 'hi', {
'class': 'someclass someclass',
'data-attr': 'attr'
});
});
}
<button>Add Div</button>
<div id="parent">
</div>

Yes, you can easily add a div on button click in jQuery. First, set up the click listener:
$('button').on('click', addDiv);
Then, create the function to add the div (here, the div is being added to the element with the class of container):
function addDiv() {
$('.container').append('<div>').addClass('listing listing_ad job');
}
I hope this is helpful.

Trigger addClass on mouserover using 'this'

I am trying to create on hover color change of buttons using javascript code, the unclear part for me is how to set up 'this' attribute so the hovered element trigger the css part for specific button.
$('this').mouseover(function() {
$('#div').removeClass('svg-active');
$('#span').removeClass('light-blue-link');
});
$('this').mouseout(function() {
$('#div').removeClass('svg-active');
$('#span').removeClass('light-blue-link');
});
.button-outer {
margin-top: 30px;
}
.button {
height: 30px;
width: auto;
cursor: pointer;
z-index: 1;
}
.button::before {
display:inline-block;
content:'';
height: 100%;
vertical-align: middle;
}
.light-blue-link {
color: rgb(88, 202, 230);
}
span {
font-weight: 300;
transition: color 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='button-outer'>
<div class='button'>
<div id='div' class='svg profile'></div>
<span id='span' class=''>Profile</span>
</div>
<div class='button'>
<div id='div' class='svg friends'></div>
<span id='span' class=''>Friends</span>
</div>
<div class='button'>
<div id='div' class='svg timeline'></div>
<span id='span' class=''>Timeline</span>
</div>
<div class='button'>
<div id='div' class='svg messages'></div>
<span id='span' class=''>Messages</span>
</div>
<div class='button'>
<div id='div' class='svg bookmarks'></div>
<span id='span' class=''>Bookmarks</span>
</div>
</div>

Note: First I address the JavaScript/jQuery question, but note the "However" bit at the end — you don't need them at all for this.
Instead of 'this' you want .button or div.button.
But that's not the main problem.
The main problem is that you're using the same id on more than one element. You can't do that, it's invalid, and browsers will typically use the first element and ignore the id on the other ones.
You don't need ids on those at all. Within your handlers, this will refer to the element you hooked the event on, so you can use the fact that the div and span are inside the element (via find) to find them:
$('div.button').mouseover(function() {
var $this = $(this);
$this.find('div').removeClass('svg-active');
$this.find('span').removeClass('light-blue-link');
});
$('div.button').mouseout(function() {
var $this = $(this);
$this.find('div').removeClass('svg-active');
$this.find('span').removeClass('light-blue-link');
});
Updated example:
$('div.button').mouseover(function() {
var $this = $(this);
$this.find('div').addClass('svg-active');
$this.find('span').addClass('light-blue-link');
});
$('div.button').mouseout(function() {
var $this = $(this);
$this.find('div').removeClass('svg-active');
$this.find('span').removeClass('light-blue-link');
});
.button-outer {
margin-top: 30px;
}
.button {
height: 30px;
width: auto;
cursor: pointer;
z-index: 1;
}
.button::before {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
.light-blue-link {
color: rgb(88, 202, 230);
}
span {
font-weight: 300;
transition: color 1s ease;
}
<div class='button-outer'>
<div class='button'>
<div class='svg profile'></div>
<span class=''>Profile</span>
</div>
<div class='button'>
<div class='svg friends'></div>
<span class=''>Friends</span>
</div>
<div class='button'>
<div class='svg timeline'></div>
<span class=''>Timeline</span>
</div>
<div class='button'>
<div class='svg messages'></div>
<span class=''>Messages</span>
</div>
<div class='button'>
<div class='svg bookmarks'></div>
<span class=''>Bookmarks</span>
</div>
</div>
<!-- Scripts at the bottom unless you have a good reason to do something else -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I also changed the calls in your mouseover callback to addClass rather than removeClass.
Other things to consider:
You could use event delegation rather than hooking the event on the buttons directly:
$(".button-outer").on("mouseover", ".div.button", function() {
// ...
});
You could toggle a class on the button itself rather than on the things inside it, and then use structural CSS to apply the styling
However, you don't need JavaScript for this at all: Just use a div.button:hover div rule and a div.button:hover span rule:
.button-outer {
margin-top: 30px;
}
.button {
height: 30px;
width: auto;
cursor: pointer;
z-index: 1;
}
.button::before {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
div.button:hover span {
color: rgb(88, 202, 230);
}
span {
font-weight: 300;
transition: color 1s ease;
}
<div class='button-outer'>
<div class='button'>
<div class='svg profile'></div>
<span class=''>Profile</span>
</div>
<div class='button'>
<div class='svg friends'></div>
<span class=''>Friends</span>
</div>
<div class='button'>
<div class='svg timeline'></div>
<span class=''>Timeline</span>
</div>
<div class='button'>
<div class='svg messages'></div>
<span class=''>Messages</span>
</div>
<div class='button'>
<div class='svg bookmarks'></div>
<span class=''>Bookmarks</span>
</div>
</div>
<!-- Scripts at the bottom unless you have a good reason to do something else -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

In jQuery, Argument as a string inside $() is a selector. It's failing due to jQuery method look out for element / tag in your DOM like below and One more below is invalid tag.
<this></this>
Try with valid selector like $('div.button')
Note: ID is for unique identifier. please use once. its not semantic if you use multiple times.
Efficient way will be from CSS. Main benefit will mouseout case will be taken care by browser.
div.button:hover {
color: blue;
font-size: 27px;
width:100px;
}