We Keep Coding

Two Column Accordion with Separate Full Width Divs

The intension is to have a two column accordion, without limiting the "expand" field to the left or right column. The catch is that there will be multiple on one page. This is already created, but only button 1 is working. With the way my JS is going, it will get very very repetitive - I am looking for assistance with re-writing the JS to be multiple click friendly. Fiddle: https://codepen.io/ttattini/pen/abLzaaY
EDIT: It would also be perfect if one dropdown would close as the next is opened
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="row">
<div id="column">
<button id="button">I am Button #1</button>
<button id="button">I am Button #3</button>
</div>
<div id="column">
<button id="button">I am Button #2</button>
<button id="button">I am Button #4</button>
</div>
</div>
<div id="hidden">
<p id="content"> So here I am #1</p>
</div>
<div id="hidden">
<p id="content"> So here I am #2</p>
</div>
<div id="hidden">
<p id="content"> So here I am #3</p>
</div>
<div id="hidden">
<p id="content"> So here I am #4</p>
</div>
CSS
#hidden {
background: #ccc;
margin-top: 2%;
overflow: hidden;
transition: height 200ms;
height: 0; /* <-- set this */
}
#button {
padding: 10px;
margin-top: 5px;
width:50%;
margin-left: 10%;
cursor: pointer;
}
#row {
display: flex;
}
#column {
flex: 50%;
}
JS
$(function() {
var b = $("#button");
var w = $("#hidden");
var l = $("#content");
b.click(function() {
if (w.hasClass('open')) {
w.removeClass('open');
w.height(0);
} else {
w.addClass('open');
w.height(l.outerHeight(true));
}
});
});

The biggest issue is that you're using IDs when you should be using classes. IDs must be unique to each element in a page. When you repeat an ID, JS will only target the first element using that ID. That's why only the first one is working.
The second issue is that, because of the way the script is written, it will only target a single element. What you need to do is get all the elements you want to target by something like their class name and then loop through them, applying the event listener to each one and its appropriate children.
EDIT: Here is an example from some code I wrote for a page with multiple accordions a few weeks ago in vanilla JS
//Below I establish a counting variable and find all the accordions on the page
const acc = document.getElementsByClassName( 'accordion' );
let i;
//Looping through each accordion
for ( i = 1; i <= acc.length; i++ ) {
//Identify target for the event listener. In this case, a heading for each accordion, which I've numbered e.g. "title-1"
const title = 'title-' + i;
const label = document.getElementById( title );
//Identify target content, in this case a list that has a unique ID e.g. "list-1"
const listNum = 'list-' + i;
const list = document.getElementById( listNum );
//Add event listener to heading that toggles the active classes
label.addEventListener( 'click', function() {
label.classList.toggle( 'accordion--active' );
});
}
Of course, there's more than one way to skin a cat, but this is a working example.

I have tracked the clicked event of each button and showed the corresponding hidden content with the use of data- attribute.
I have used vanilla JavaScipt instead of jQuery.
const buttons = document.querySelectorAll('.button');
const hiddens = document.querySelectorAll('.hidden');
buttons.forEach((btn) => {
btn.addEventListener('click', btnClicked)
function btnClicked(e) {
hiddens.forEach((hidden) => {
if(e.target.dataset.btn == hidden.dataset.content) {
hidden.classList.toggle('height')
} else {
hidden.classList.remove('height')
}
})
}
})
.hidden {
background: #ccc;
margin-top: 2%;
padding-left:2%;
overflow: hidden;
transition: height 200ms;
height: 0; /* <-- set this */
}
.hidden.height {
height: 50px;
}
.button {
padding: 10px;
color: white;
background-color: #2da6b5;
border: none;
margin-top: 5px;
width:90%;
margin-left: 5%;
cursor: pointer;
}
.button:hover {
filter: brightness(.9);
}
#row {
display: flex;
}
.column {
flex: 50%;
}
<div id="row">
<div class="column">
<button class="button" data-btn="one">I am Button #1</button>
<button class="button" data-btn="three">I am Button #3</button>
</div>
<div class="column">
<button class="button" data-btn="two">I am Button #2</button>
<button class="button" data-btn="four">I am Button #4</button>
</div>
</div>
<div class="hidden" data-content="one">
<p class="content"> So here I am #1</p>
</div>
<div class="hidden" data-content="two">
<p class="content"> So here I am #2</p>
</div>
<div class="hidden" data-content="three">
<p class="content"> So here I am #3</p>
</div>
<div class="hidden" data-content="four">
<p class="content"> So here I am #4</p>
</div>
Also, please do not use the same ID at multiple elements.

How does one handle DOM events from various buttons by a single handler function

I'm not sure if it's possible, but I'd like to use one unique function to trigger 4 different buttons to count a value (+ and -). But there are four different span values, for example, if I trigger forest it will only add or remove from forest, if I do it for town it will only trigger for town, and so on.
// set inital value to zero
let count = 0;
// select value and buttons
const valueForest = document.querySelector("#valueForest");
const btns = document.querySelectorAll(".btn");
btns.forEach(function (btn) {
btn.addEventListener("click", function (e) {
const styles = e.currentTarget.classList;
if (styles.contains("decrease")) {
count--;
} else if (styles.contains("increase")) {
count++;
} else {
count = 0;
}
if (count > 0) {
valueForest.style.color = "green";
}
if (count < 0) {
valueForest.style.color = "red";
}
if (count === 0) {
valueForest.style.color = "#222";
}
valueForest.textContent = count;
});
});
<div class="scoreDiv">
<h3>Input below the quantity of each tile in the end of the game:</h3>
<div class="scoreItem">
<h4>Forest</h4>
<button class="btn decrease">-</button>
<span class="value" id="valueForest">0</span>
<button class="btn increase">+</button>
<h4>SOMA</h4>
</div>
<div class="scoreItem">
<h4>Town</h4>
<button class="btn decrease">-</button>
<span class="value" id="valueTown">0</span>
<button class="btn increase">+</button>
<h4>SOMA</h4>
</div>
<div class="scoreItem">
<h4>Production</h4>
<button class="btn decrease">-</button>
<span class="value" id="valueProduction">0</span>
<button class="btn increase">+</button>
<h4>SOMA</h4>
</div>
<div class="scoreItem">
<h4>Factory</h4>
<button class="btn decrease">-</button>
<span class="value" id="valueFactory">0</span>
<button class="btn increase">+</button>
<h4>SOMA</h4>
</div>
</div>

Since there is nothing to add to Mister Jojo's already perfectly answered event delegation based approach, I will focus on an approach that sees and treats repeatedly used DOM structures which feature a specific behavior as components
As for the OP's example there would be just a Score Item component which implements its specific behavior exactly once and independent from the semantics of the underlying HTML/CSS.
The amount of implemented/used JavaScript code is still small enough in comparison to what such a Score Item component actually is capable of.
Identifying component structures relies on data attributes which decouples this task from whatever provided HTML- and CSS- code/environment.
Each component encapsulates its state at initialization/creation time; thus it does not read the data from the DOM (it only does write to the latter), but it does read and write the data from/to its encapsulated state.
A component also can be configured via component specific data attributes for an initially displayed value as well as for distinct incrementing/decrementing values.
The color-schema for positive, negative or Zero values are described by component specific and data attribute based CSS rules; there is no reason for layout related scripting overhead ...
function incrementBoundItemScore() {
const { outputControl: ctrl, currentValue, incrementValue } = this;
ctrl.textContent = ctrl.dataset.currentValue = this.currentValue = (currentValue + incrementValue);
}
function decrementBoundItemScore() {
const { outputControl: ctrl, currentValue, decrementValue } = this;
ctrl.textContent = ctrl.dataset.currentValue = this.currentValue = (currentValue + decrementValue);
}
function initializeScoreItem(rootNode) {
const incrementControl = rootNode.querySelector('[data-increase]');
const decrementControl = rootNode.querySelector('[data-decrease]');
const outputControl = rootNode.querySelector('[data-output]');
const incrementValue = parseFloat(incrementControl.dataset.value, 10);
const decrementValue = parseFloat(decrementControl.dataset.value, 10);
const initialValue = parseFloat(outputControl.dataset.initialValue, 10);
const scoreItem = {
outputControl,
currentValue: initialValue,
incrementValue,
decrementValue,
}
outputControl.textContent = outputControl.dataset.currentValue = initialValue;
incrementControl
.addEventListener('click', incrementBoundItemScore.bind(scoreItem));
decrementControl
.addEventListener('click', decrementBoundItemScore.bind(scoreItem));
}
function initialize() {
document
.querySelectorAll('[data-score-item-component]')
.forEach(initializeScoreItem);
}
initialize();
body {
zoom: .8;
margin: 0;
}
ul, li {
list-style: none;
}
ul {
margin: 0;
}
fieldset {
padding: 0px 10px;
}
.score-group {
margin: 4px 0;
}
.score-item {
margin: 0 0 5px 0;
}
.score-item legend {
font-weight: bold;
}
.score-item strong {
position: relative;
top: -2px;
font-weight: normal;
font-size: small;
text-transform: uppercase
}
[data-output][data-current-value] {
display: inline-block;
width: 3em;
text-align: center;
font-weight: bold;
color: green;
}
[data-output][data-current-value="0"] {
color: #222;
}
[data-output][data-current-value^="-"] {
color: red;
}
<section class="score-board">
<!--
<h3>Input below the quantity of each tile in the end of the game:</h3>
//-->
<ul>
<li class="score-item">
<fieldset data-score-item-component>
<legend>Forest</legend>
<div class="score-group">
<button
type="button"
data-decrease
data-value='-1'
class="btn decrease"
>-</button>
<output
name="forest-score"
data-output
data-initial-value="9"
></output>
<button
type="button"
data-increase
data-value='1'
class="btn increase"
>+</button>
</div>
<strong>Soma</strong>
</fieldset>
</li>
<li class="score-item">
<fieldset data-score-item-component>
<legend>Town</legend>
<div class="score-group">
<button
type="button"
data-decrease
data-value='-2'
class="btn decrease"
>-</button>
<output
name="town-score"
data-output
data-initial-value="0"
></output>
<button
type="button"
data-increase
data-value='2'
class="btn increase"
>+</button>
</div>
<strong>Soma</strong>
</fieldset>
</li>
<li class="score-item">
<fieldset data-score-item-component>
<legend>Production</legend>
<div class="score-group">
<button
type="button"
data-decrease
data-value='-5'
class="btn decrease"
>-</button>
<output
name="production-score"
data-output
data-initial-value="-10"
></output>
<button
type="button"
data-increase
data-value='5'
class="btn increase"
>+</button>
</div>
<strong>Soma</strong>
</fieldset>
</li>
<li class="score-item">
<fieldset data-score-item-component>
<legend>Factory</legend>
<div class="score-group">
<button
type="button"
data-decrease
data-value='-2'
class="btn decrease"
>-</button>
<output
name="factory-score"
data-output
data-initial-value="-5"
></output>
<button
type="button"
data-increase
data-value='1'
class="btn increase"
>+</button>
</div>
<strong>Soma</strong>
</fieldset>
</li>
</ul>
</section>

yes, with event delegation
this way:
const scoreDiv = document.querySelector('div.scoreDiv') // the parent Div
scoreDiv.onclick = e => // get all clicks everywhere upon this parent Div
{
if (!e.target.matches('div.scoreItem > button.btn ')) return // ignore other clicks
let countEl = e.target.closest('div.scoreItem').querySelector('span.value')
, newVal = +countEl.textContent + (e.target.matches('.decrease') ? -1 : +1)
;
countEl.style.color = (newVal > 0) ? 'green' : (newVal < 0) ? 'red' : '#222'
countEl.textContent = newVal;
}
span.value {
display : inline-block;
width : 5em;
text-align : right;
padding-right : .5em;
font-weight : bold;
}
<div class="scoreDiv">
<h3>Input below the quantity of each tile in the end of the game:</h3>
<div class="scoreItem">
<h4>Forest</h4>
<button class="btn decrease">-</button>
<span class="value" id="valueForest">0</span>
<button class="btn increase">+</button>
<h4>SOMA</h4>
</div>
<div class="scoreItem">
<h4>Town</h4>
<button class="btn decrease">-</button>
<span class="value" id="valueTown">0</span>
<button class="btn increase">+</button>
<h4>SOMA</h4>
</div>
<div class="scoreItem">
<h4>Production</h4>
<button class="btn decrease">-</button>
<span class="value" id="valueProduction">0</span>
<button class="btn increase">+</button>
<h4>SOMA</h4>
</div>
<div class="scoreItem">
<h4>Factory</h4>
<button class="btn decrease">-</button>
<span class="value" id="valueFactory">0</span>
<button class="btn increase">+</button>
<h4>SOMA</h4>
</div>
</div>
Explanations about
if (!e.target.matches('div.scoreItem > button.btn')) return
First of all the event handler scoreDiv.onclick = e => concern everything inside
<div class="scoreDiv">
// everything inside
</div>
So this get any click event in this space is processed by this arrow function.
It could be a click:
on the H3 element
, or one of the span elements
, or any the H4 elements
, everything !
, even the spaces between any elements.
the event [e] have diffrents properties
e.currentTarget --> is a reference to the caller element (here it is scoreDiv [div.scoreItem])
e.target --> is a reference to the element where the click happen
for this job we need to do only increment / decrement operations.
that's mean we have to ignore any click event witch is not on the plus or minus buttons.
This 8 buttons are : <button class="btn decrease">-</button> or <button class="btn increase">-</button>
All this buttons correspond to CSS = div.scoreItem > button.btn
In javascript the code for testing that is
e.target.matches('div.scoreItem > button.btn')
will return a boolean value (true or false)
There is now a strategy: Instead of making a big
if ( e.target.matches('div.scoreItem > button.btn') )
{
//...
// with many lines of code
//until the closing
}
// and then quit the function
and because this is a function we use a Logical NOT (!)
to make a direct return from function, coded like that:
if (!e.target.matches('div.scoreItem > button.btn')) return
The main interest is to quickly free the event manager in case of another element (present in scoreDiv) have is own click eventHandler.

I looked up how to change the color directly via css and luckily Peter Seliger showed that.
I also added in css an output::before {content: attr(data-value)} allowing to directly attribute this value on the display, without JS code
This further simplifies the javascript code.
(I also took the liberty of changing the interface a little to lighten it up completely, which is of no interest for this demonstration)
const scoreBoard = document.querySelector('#score-board')
scoreBoard.onclick = e =>
{
if (!e.target.matches('#score-board button')) return
let countEl = e.target.closest('fieldset')
.querySelector('output[data-value]')
countEl.dataset.value = +countEl.dataset.value
+ (+e.target.dataset.increase)
}
body, textarea, input {
font-family : Helvetica, Arial sans-serif;
font-size : 12px;
}
#score-board fieldset {
width : 20em;
margin : .5em 1em;
}
#score-board legend {
font-size : 1.4em;
padding : 0 .7em;
}
#score-board output {
display : inline-block;
font-size : 1.4em;
width : 5em;
text-align : right;
padding-right : .5em;
color : green;
font-weight : bold;
border-bottom : 1px solid grey;
margin : 0 .8em 0 .2em;
}
#score-board output::before {
content : attr(data-value)
}
#score-board output[data-value="0"] {
color: #222;
}
#score-board output[data-value^="-"] {
color: red;
}
<section id="score-board">
<fieldset>
<legend>Forest</legend>
<output data-value="-10"></output>
<button data-increase="+1">𑁕</button>
<button data-increase="-1">𑁒</button>
</fieldset>
<fieldset>
<legend>Town</legend>
<output data-value="0"></output>
<button data-increase="+1">𑁕</button>
<button data-increase="-1">𑁒</button>
</fieldset>
<fieldset>
<legend>Production</legend>
<output data-value="-7"></output>
<button data-increase="+1">𑁕</button>
<button data-increase="-1">𑁒</button>
</fieldset>
<fieldset>
<legend>Factory</legend>
<output data-value="5"></output>
<button data-increase="+1">𑁕</button>
<button data-increase="-1">𑁒</button>
</fieldset>
</section>

// set inital value to zero
//let count = 0;
// select value and buttons
const btns = document.querySelectorAll(".btn");
btns.forEach(function (btn) {
btn.addEventListener("click", function (e) {
const styles = e.currentTarget.classList;
const SectionValue = e.currentTarget.parentNode.querySelector('span');
var count = Number( SectionValue.innerHTML );
if (styles.contains("decrease")) {
count--;
} else {
count++;
}
if (count > 0) {
SectionValue.style.color = "green";
} else if (count < 0) {
SectionValue.style.color = "red";
} else {
SectionValue.style.color = "#222";
}
SectionValue.innerHTML = count;
});
});
<div class="scoreDiv">
<h3>Input below the quantity of each tile in the end of the game:</h3>
<div class="scoreItem">
<h4>Forest</h4>
<button class="btn decrease">-</button>
<span class="value" id="valueForest">0</span>
<button class="btn increase">+</button>
<h4>SOMA</h4>
</div>
<div class="scoreItem">
<h4>Town</h4>
<button class="btn decrease">-</button>
<span class="value" id="valueTown">0</span>
<button class="btn increase">+</button>
<h4>SOMA</h4>
</div>
<div class="scoreItem">
<h4>Production</h4>
<button class="btn decrease">-</button>
<span class="value" id="valueProduction">0</span>
<button class="btn increase">+</button>
<h4>SOMA</h4>
</div>
<div class="scoreItem">
<h4>Factory</h4>
<button class="btn decrease">-</button>
<span class="value" id="valueFactory">0</span>
<button class="btn increase">+</button>
<h4>SOMA</h4>
</div>
</div>

Displaying a message when jQuery filter returns nothing

I found code online that filters elements by their text content.
How can I display a message when there is no match?
$("button").click(function() {
var value = $(this).data('value').toUpperCase();
$("div").filter(function(index) {
$(this).toggle($(this).text().indexOf(value) > -1)
});
});
<button>example</button>

You're using filter() to toggle each item based on state, like using each(). But one advantage of filter() is that you can return a reduced selection and count the items it contains. That value can determine whether a "no match" message should be displayed.
... the .filter() method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against each element; all elements matching the selector will be included in the result. -- filter().
For each element, if the function returns true (or a "truthy" value), the element will be included in the filtered set; otherwise, it will be excluded. -- Using a Filter Function
So, instead of toggling items directly from the filter call, consider returning a Boolean measure of whether the current item is a match. Save the resulting filtered selection in a variable. After filtering, you can toggle that selection as a whole:
var $filtered = $items.filter(function() {
return $(this).text().indexOf(value) > -1;
});
$items.toggle(false);
$filtered.toggle(true);
This hides all items and then shows only the filtered items.
You might even consider some fading animation:
$items.hide(250);
$filtered.stop(true,false).show(250);
Then you can reference the filtered selection's length.
If it's zero, show the "not found" message:
var hasMatches = $filtered.length;
if (hasMatches) {
// there were matches.
} else {
// no matches.
}
You can also pass a selector to a filter. jQuery's :contains() selector selects "all elements that contain the specified text", which makes a nice choice.
Working Example:
var $items = $('.item');
var $none = $('#none');
var fade = 250;
function filterContent() {
// get word from value of clicked button.
var word = this.value;
// hide items; filter; show filtered; count matches
var hasMatches = $items
.hide(fade)
.filter(':contains(' + word + ')')
.stop(true, false)
.show(fade)
.length;
// if no matches, show message.
if (hasMatches) {
$none.hide(fade);
} else {
$none.show(fade);
}
}
$('button').on('click', filterContent);
#none {
display: none;
color: darkred;
}
#buttons {
margin: 1em 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">Here is some text.</div>
<div class="item">Here is some other text.</div>
<div class="item">Here is some other different text.</div>
<div class="item">Here is something else.</div>
<div class="item">Here is some additional text.</div>
<div id="none">No matches found.</div>
<nav id="buttons">
<button type="button" value="">all</button>
<button type="button" value="text">text</button>
<button type="button" value="other">other</button>
<button type="button" value="additional">additional</button>
<button type="button" value="bazooka">bazooka</button>
</nav>
Another way:
If you prefer, you can toggle inside the filter as long as you still return the state Boolean from the function. I suggest making a separate function to pass to the filter. In this case, toggleItem() determines the state of an item (match or non-match), toggles the item according to that state, and returns the state.
var $items = $('.item');
var $none = $('#none');
function toggleItem(word) {
return function(k, el) {
var $item = $(el);
var state = $item.text().indexOf(word) > -1;
$item.toggle(state);
return state;
}
}
function filterContent() {
// get word from value of clicked button.
var word = this.value;
// filter while toggling and count result.
var hasMatches = $items
.filter(toggleItem(word))
.length;
// if no matches, show message.
$none.toggle(!hasMatches);
}
$('button').on('click', filterContent);
#none {
display: none;
color: darkred;
}
#buttons {
margin: 1em 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">Here is some text.</div>
<div class="item">Here is some other text.</div>
<div class="item">Here is some other different text.</div>
<div class="item">Here is something else.</div>
<div class="item">Here is some additional text.</div>
<div id="none">No matches found.</div>
<div id="buttons">
<button type="button" value="">all</button>
<button type="button" value="text">text</button>
<button type="button" value="other">other</button>
<button type="button" value="additional">additional</button>
<button type="button" value="bazooka">bazooka</button>
</div>
In my opinion, this is a bit harder to read and not as clear as the chained "hide,filter,show,length" commands, but that's somewhat a matter of style. You can see that there are many ways to bake this cake!
This one's pretty short and sweet:
var $none = $("#none");
var $items = $(".item");
$("button").click(function() {
var value = $(this).data('value');
$items.each(function() {
$(this).toggle($(this).text().indexOf(value) > -1);
});
$none.toggle(!$items.filter(':visible').length);
});
#none {
display: none;
color: darkred;
}
#buttons {
margin: 1em 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">Here is some text.</div>
<div class="item">Here is some other text.</div>
<div class="item">Here is some other different text.</div>
<div class="item">Here is something else.</div>
<div class="item">Here is some additional text.</div>
<div id="none">No matches found.</div>
<nav id="buttons">
<button type="button" data-value="">all</button>
<button type="button" data-value="text">text</button>
<button type="button" data-value="other">other</button>
<button type="button" data-value="additional">additional</button>
<button type="button" data-value="bazooka">bazooka</button>
</nav>

You can create a variable to count match item.
$("button").click(function(){
var value = $(this).data('value').toUpperCase();
var count = 0;
$("div").filter(function(index) {
if($(this).text().indexOf(value) > -1) count++;
$(this).toggle($(this).text().indexOf(value) > -1)
});
if(count == 0) alert('Not match');
});
$("button").click(function(){
var value = $(this).data('value').toUpperCase();
var count = 0;
$("div").filter(function(index) {
if($(this).text().indexOf(value) > -1) count++;
$(this).toggle($(this).text().indexOf(value) > -1)
});
if(count == 0) alert('Not match');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>TEST1</div>
<div>example</div>
<div>test1</div>
<button data-value='test1'>example</button>

filter() returns the value. Check if the length is 1 or more.
$(".filter").click(function() {
var value = $(this).text(); //Get the text of the button
var result = $("div").hide().filter(function(i, o) { //Hide All and filter
return $(o).text().includes(value); //Return true if the content of div contains text of the button
}).show(); //Show all result
if (result.length) { //Check the length of the result
//Found match/es
$(".msg").text('');
} else {
//No match
$(".msg").text(`${value} not found`);
}
});
$(".show-all").click(function() {
$("div").show();
});
.msg {
border: 1px solid black;
}
div {
background-color: pink
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="msg"></span>
<br /><br />
<div> apple </div>
<div> orange </div>
<div> rock melon</div>
<div> pineapple </div>
<div> pineapple pie</div>
<br /><br />
<button class="filter">example</button>
<button class="filter">pineapple</button>
<button class="filter">rock</button>
<br /><br />
<button class="show-all">Show all</button>

Creating a filter bar with Javascript [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am new to Javascript and only have very basic knowledge of it at this stage.
I am trying to create a filter bar that, when clicked, would set the opacity of the non-matched items to 0.2 and the matched item would remain at full opacity.
I have uploaded the html/css to show an example on jsfiddle: https://jsfiddle.net/rebeccasmith1301/zw2aozff/
<div id="filter-bar">
<button onclick="findShoes()">Shoes</button>
<button onclick="findTops()">Tops</button>
<button onclick="findSkirts()">Skirts</button>
</div>
<div class="product-item">
<p>Shoes</p>
</div>
<div class="product-item">
<p>Tops</p>
</div>
Skirts
I have been experimenting with javascript written on a previous post that I found very helpful but due to my basic knowledge I have been unable to solve how to achieve the results I am aiming for.
I basically would like the user to be able to click on the button shoes (for example) and all of the divs that contain the word shoes to remain with full opacity and all other divs to have the class un-selected which lowers the opacity to 0.2. The divs that contain the products can be a class only, not an id as well.
Would anyone be able to help? This would be using mainly vanilla javascript.
Many thanks,
Becky

Fiddle with multiple words: https://jsfiddle.net/qucwvqfr/1/
Fiddle with white space removal: https://jsfiddle.net/d15v3x0w/1/
Don't make a function for each possible variation of content, just make one function and give that a parameter. This javascript would check the textContent of the items, strip the whitespace from them, and change classes accordingly. The hasClass, addClass, and removeClass are helpers, focus on the highlightItems function.
function hasClass(ele,cls) {
return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
if (!hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
var highlightItems = function(itemName) {
var p = document.getElementsByClassName("product-item");
for (var i = 0; i < p.length; i++) {
itemText = p[i].textContent.replace(/^\s+|\s+$/g,''); // you don't need the .replace() part if you don't add extra white space in the HTML
if ( !(itemText == itemName) ) {
addClass(p[i], "un-selected");
} else {
removeClass(p[i], "un-selected");
}
}
}
And you would use it like this:
<div id="filter-bar">
<button onclick="highlightItems('Shoes')">Shoes</button>
<button onclick="highlightItems('Tops')">Tops</button>
<button onclick="highlightItems('Skirts')">Skirts</button>
</div>
Note:
If you want to have multiple words inside the box, don't add any unnecessary white space inside the div tags. (You probably shouldn't do it anyway.) So the HTML usage would be like this:
<div class="product-item">Shoes and socks</div>
<div class="product-item">Tops</div>
<div class="product-item">Skirts</div>
Credits for the class-changing functions go to http://jaketrent.com/post/addremove-classes-raw-javascript/

There needs to be a reliable way to select the specified items. I propose that you add a class shoes, tops and skirts to their respective elements:
<div class="product-item shoes">
Shoes
</div>
<div class="product-item tops">
Tops
</div>
<div class="product-item skirts">
Skirts
</div>
Now, to select all elements that got shoes it's really easy:
var shoes = document.getElementsByClassName('shoes');
Selecting elements that don't have a class shoes is another story. Let say we start by collecting out all product-item elements, like so:
var products = document.getElementsByClassName('product-item');
From here on, you need to iterate all the elements inside the returned nodeList and check if they got a shoes class. A helper function that can help you with that:
function not(nodeList, cls){
var reg = new RegExp('\\b' + cls + '\\b');
return Array.prototype.reduce.call(nodeList, function(acc, el){
console.log(el, el.className.search(reg))
if(el.className.match(reg) === null){
acc.push(el);
}
return acc;
}, []);
}
So now, to get products that aren't shoes:
var notShoes = not(products, 'shoes');
To change the opacity of all the elements inside a nodeList we could use another helper function:
function changeOpacity(nodeList, opacity){
Array.prototype.forEach.call(nodeList, function(el){
el.style.opacity = opacity;
});
}
And to use it:
changeOpacity(shoes, 1.0);
changeOpacity(notShoes, 0.2);
All together in this snippet:
function find(cls) {
var clsList = document.getElementsByClassName(cls);
var products = document.getElementsByClassName('product-item');
var notCls = not(products, cls);
changeOpacity(clsList, 1.0);
changeOpacity(notCls, 0.2);
}
function not(nodeList, cls){
var reg = new RegExp('\\b' + cls + '\\b');
return Array.prototype.reduce.call(nodeList, function(acc, el){
console.log(el, el.className.search(reg))
if(el.className.match(reg) === null){
acc.push(el);
}
return acc;
}, []);
}
function changeOpacity(nodeList, opacity){
Array.prototype.forEach.call(nodeList, function(el){
el.style.opacity = opacity;
});
}
/* Styling for filter bar*/
#filter-bar{
width: 100%
}
#filter-bar button{
width: 30%
float: left;
margin: 0.5%;
}
/* Styling for products*/
.product-item{
width: 24%;
float: left;
margin: 0.5%;
background-color: red;
height: 80px;
box-sizing: border-box;
padding: 10px;
}
/* Different options for products with button click*/
.un-selected{
opacity: 0.2;
}
<div id="filter-bar">
<button onclick="find('shoes')">Shoes</button>
<button onclick="find('tops')">Tops</button>
<button onclick="find('skirts')">Skirts</button>
</div>
<div class="product-item shoes">
Shoes
</div>
<div class="product-item tops">
Tops
</div>
<div class="product-item skirts">
Skirts
</div>
<div class="product-item skirts">
Skirts
</div>
<div class="product-item shoes">
Shoes
</div>
<div class="product-item tops">
Tops
</div>
<div class="product-item skirts">
Skirts
</div>
<div class="product-item skirts">
Skirts
</div>

I have a solution with jquery:
HTML
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Tops</button>
<button class="btn" id="b">Skirts</button>
<button class="btn" id="c">Shoes</button>
<!-- An element with an id is needed for the jQuery -->
<div id="parent">
<!-- The base class is the box. Categories are then given as accessory classes. Any div can be in more than one category -->
<div class="box product-item a b">Shoes & Tops</div>
<div class="box product-item a">Tops</div>
<div class="box product-item b">Skirts</div>
<div class="box product-item c">Shoes</div>
</div>
CSS
/* Styling for filter bar*/
#filter-bar{
width: 100%
}
#filter-bar button{
width: 30%
float: left;
margin: 0.5%;
}
/* Styling for products*/
.product-item{
width: 24%;
float: left;
margin: 0.5%;
background-color: red;
height: 80px;
box-sizing: border-box;
padding: 10px;
}
/* Different options for products with button click*/
.un-selected{
opacity: 0.2;
}
jQuery
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('#parent > div').fadeIn(450);
} else {
var $el = $('.' + this.id).fadeIn(450);
$('#parent > div').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
jsfiddle

function filter(me) {
var items = document.getElementsByClassName("product-item");
console.log(me.textContent);
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.style.display = "";
if (item.textContent.trim() !== me.textContent.trim() && me.textContent.trim() !== "All") {
item.style.display = "none";
}
}
}
/* Styling for filter bar*/
#filter-bar{
width: 100%
}
#filter-bar button{
width: 30%
float: left;
margin: 0.5%;
}
/* Styling for products*/
.product-item{
width: 24%;
float: left;
margin: 0.5%;
background-color: red;
height: 80px;
box-sizing: border-box;
padding: 10px;
}
/* Different options for products with button click*/
.un-selected{
opacity: 0.2;
}
<div id="filter-bar">
<button onclick="filter(this)">Shoes</button>
<button onclick="filter(this)">Tops</button>
<button onclick="filter(this)">Skirts</button>
<button onclick="filter(this)">All</button>
</div>
<div class="product-item">
Shoes
</div>
<div class="product-item">
Tops
</div>
<div class="product-item">
Skirts
</div>
<div class="product-item">
Skirts
</div>
<div class="product-item">
Shoes
</div>
<div class="product-item">
Tops
</div>
<div class="product-item">
Skirts
</div>
<div class="product-item">
Skirts
</div>

JQuery Show Hide Multiple Div Button

I need to develop a News page with 3 articles that can be hidden or showed one by one, by means of 2 buttons: "Show more news" and "Show less news"
Each article must be hidden/displayed by clicking the relevant button only once, starting from the last article (at the bottom page) to the first one (top of page). HTML:
<!-- Articles-->
<article id="art-1" class="row" >My first Art</article>
<article id="art-2" class="row art" >My second Art</article>
<article id="art-3" class="row art" >My last Art</article>
<!--Buttons-->
<button class="button-grey" id="show-less-news1">Show Less</button>
<button class="button-grey" id="show-less-news2">Show Less</button>
<button class="button-grey" id="show-less-news3">Show Less</button>
<button class="button-grey" id="show-more-news1">Show More</button>
<button class="button-grey" id="show-more-news2">Show More</button>
<button class="button-grey" id="show-more-news3">Show More</button>
I managed to do this with JQuery but the code is extremely verbose and I need 6 buttons instead of 2, but I believe there must be a simplier way to get the same result with a less complex code. This is the JQuery code:
$("#show-more-news1").css({display:'none'});
$("#show-more-news2").css({display:'none'});
$("#show-more-news3").css({display:'none'});
$("#show-less-news1").css({display:'none'});
$("#show-less-news2").css({display:'none'});
//function 1 less
$("#show-less-news3").click(function(){
$("#art-3").hide(400);
$("#show-less-news3").hide();
$("#show-more-news3").show();
$("#show-less-news2").show();
});
//function 2 less
$("#show-less-news2").click(function(){
$("#art-2").hide(400);
$("#show-less-news2").hide();
$("#show-more-news3").hide();
$("#show-less-news1").show();
$("#show-more-news2").show();
});
//function 3 more
$("#show-more-news3").click(function(){
$("#art-3").show(400);
$("#show-more-news3").hide();
$("#show-less-news2").hide();
$("#show-less-news3").show();
});
//function 3 less
$("#show-less-news1").click(function(){
$("#art-1").hide(400);
$("#show-less-news1").hide();
$("#show-more-news2").hide();
$("#show-more-news1").show();
});
//function 2 more
$("#show-more-news2").click(function(){
$("#art-2").show(400);
$("#show-more-news2").hide();
$("#show-less-news1").hide();
$("#show-less-news2").show();
$("#show-more-news3").show();
});
//function 1 more
$("#show-more-news1").click(function(){
$("#art-1").show(400);
$("#show-more-news1").hide();
$("#show-less-news1").show();
$("#show-more-news2").show();
});
Some CSS:
article {
position: realtive;
width: 100%;
height: 50px;
border: 1px solid red;
float:left;
background-color: yellow;
}
.button-grey {
display: block;
background-color: #cfcfcf;
width: 150px;
height: 30px;
float:right;
}
Here's a CodePen. Can someone help me to get the same result with a better code?
Thanks a lot!

Using your HTML with only two buttons and identical CSS
The following JS works for better for me:
Javascript:
var newsDepth = 3;
var maxNewsDepth = 3;
$('#show-more-news').hide();
$('#show-more-news').click( function () {
(newsDepth < maxNewsDepth ) && newsDepth++;
$('#art-' + newsDepth).show();
$('#show-less-news').show();
if (newsDepth == maxNewsDepth) $('#show-more-news').hide();
});
$('#show-less-news').click( function () {
( newsDepth > 1 ) && newsDepth--;
$('#art-' + (newsDepth + 1)).hide();
$('#show-more-news').show();
if (newsDepth == 1) $('#show-less-news').hide();
});
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Articles-->
<article id="art-1" class="row">My first Art</article>
<article id="art-2" class="row art">My second Art</article>
<article id="art-3" class="row art">My last Art</article>
<!--Buttons-->
<button class="button-grey" id="show-less-news">Show Less</button>
<button class="button-grey" id="show-more-news">Show More</button>
Here is a codepen for you

I've got a better version in this jsfiddle.
HTML:
<!-- Articles-->
<div id="articles">
<article id="art-1" class="row">My first Art</article>
<article id="art-2" class="row art">My second Art</article>
<article id="art-3" class="row art">My last Art</article>
</div>
<!--Buttons-->
<button class="button-grey" id="show-less">Show Less</button>
<button class="button-grey" id="show-more" style="display: none">Show More</button>
JS:
var allArticles = $('#articles article');
var visibleCount = 3;
$('#show-less').on('click', function() {
// no more articles to hide
if (visibleCount == 0) return;
// hide the previous one
$(allArticles[--visibleCount]).hide();
// Show the more button
$('#show-more').show();
// hide the less button
if (visibleCount == 0)
$('#show-less').hide();
});
$('#show-more').on('click', function() {
if (visibleCount == allArticles.length) return;
// show the next article
$(allArticles[visibleCount++]).show();
// Show the less button
$('#show-less').show();
// hide the more button
if (visibleCount == allArticles.length)
$('#show-more').hide();
});