Skip to content

Instantly share code, notes, and snippets.

@JordiOrtega

JordiOrtega/index.html

Created June 1, 2018 21:27
Show Gist options
  • Save JordiOrtega/c3b2f0fe1cdf88a952ef663aac1ea1f1 to your computer and use it in GitHub Desktop.
Save JordiOrtega/c3b2f0fe1cdf88a952ef663aac1ea1f1 to your computer and use it in GitHub Desktop.
Download ZIP
Selectable_vanillaJS2
Raw
index.html
<div id="cero" class="box">0</div>
<div id="uno" class="box">1</div>
<div id="dos" class="box">2</div>
<div id="tres" class="box">3</div>
<div id="cuatro" class="box">4</div>
<div id="cinco" class="box">5</div>
<div id="seis" class="box">6</div>
<div id="siete" class="box">7</div>
<div id="ocho" class="box">8</div>
<div id="nueve" class="box">9</div>
<div id="diez" class="box">10</div>
<br/>
<div id="show" style="display:none;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur minima ipsum, </div>
<div id="cerobis" class="box2">0</div>
<div id="unobis" class="box2">1</div>
<div id="dosbis" class="box2">2</div>
<div id="tresbis" class="box2">3</div>
<div id="cuatrobis" class="box2">4</div>
<div id="cincobis" class="box2">5</div>
<div id="seisbis" class="box2">6</div>
<div id="sietebis" class="box2">7</div>
<div id="ochobis" class="box2">8</div>
<div id="nuevebis" class="box2">9</div>
<div id="diezbis" class="box2">10</div>
<div id="show2" style="display:none;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur minima ipsum, </div>
Raw
script.js
function removeClass(values, classToToggle) {
values.forEach(function(e) {
if (e.classList.contains("primero")) e.classList.remove("primero");
});
}
function toggleClass(event, classToToggle) {
event.target.classList.toggle(classToToggle);
}
function hideShowElement(event, elementToShow) {
const hiddenelement = document.getElementById(elementToShow);
let isshowed =
parseInt(event.target.innerHTML) <= 6
? (hiddenelement.style.display = "block")
: (hiddenelement.style.display = "none");
}
function addListener(values_clickbox, classToToggle, elementToShow) {
values_clickbox.forEach(function(element) {
element.addEventListener("click", function(event) {
removeClass(values_clickbox, classToToggle);
toggleClass(event, classToToggle);
hideShowElement(event, elementToShow);
});
});
}
function npspunctuation(selectedclass, elementToShow, classToToggle) {
const clickbox = document.getElementsByClassName(selectedclass);
const values_clickbox = Object.keys(clickbox).map(function(e) {
return clickbox[e];
});
addListener(values_clickbox, classToToggle, elementToShow);
}
npspunctuation("box", "show", "primero");
//letsnps.addListener();
npspunctuation("box2", "show2", "primero");
//letsnps2.addListener();
/* const clickbox = document.getElementsByClassName("box");
// new array contains all value elements with box class.
const values_clickbox = Object.keys(clickbox).map(function(e) {
return clickbox[e];
});
// loop on each element having box class.
values_clickbox.forEach(function(element) {
//adding click event listener to each element.
element.addEventListener("click", function(event) {
// loop to remove class "primero" on elements that have it.
values_clickbox.forEach(function(e) {
if (e.classList.contains("primero")) e.classList.remove("primero");
});
// toggle class primero on clicked element.
event.target.classList.toggle("primero");
// show hidden element if content is <=6
let hiddenelement = document.getElementById("show");
let isshowed =
parseInt(event.target.innerHTML) <= 6
? (hiddenelement.style.display = "block")
: (hiddenelement.style.display = "none");
});
});
*/
Raw
style.css
.box,
.box2{
width: 2vw;
height: 2vw;
padding: 10px;
margin: 10px 10px;
background-color: red;
display: inline-block;
}
.primero {
background-color: green;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment