We Keep Coding

Using only JS and css, can I implement a filter, so that: clicking/tapping within a JS dropdown menu shows/hides page divs by data-type?

With the help of SO member the.marolie I learned how to implement a JS filter/selector [the 'demo JS filter']. I have this working perfectly on a test page: it shows/hides divs according to "data-types" assigned to them in the body html. However, the selection is made by sliding down a <select> dropdown list and letting go at the preferred option. That's not quite what I want.
I want to utilise my existing nav-bar dropdown ['my dropdown'] as the filter/selector. I especially want to retain the existing interactivity of my dropdown, whereby one click/tap reveals the whole of the dropdown content block, and one click outside the content block closes it.
I want the elements within my dropdown to represent various show/hide <div> 'options' for the html page, and enable the user to choose from these via an additional click/tap (essentially what the demo JS filter does, but at the instigation of a click/tap). Once revealed via a nav-bar click/tap, the whole dropdown content block has to stay on-screen -as it currently does- for this to be practically possible.
After making my dropdown identifiable via id="media-selector-demo" and name="filter" I was hoping that I could assign the demo JS filter's <option> elements to the <a> elements in it, and the whole thing would function like the <select> dropdown of the demo JS filter. I had a vague idea that using <a> elements might obviate the need for another onClick in the JS. I've tried various combinations of <a> and <option> elements, but nothing has worked yet.
Do I need another onClick to invoke the JS filter via my dropdown? or
Can I invoke the JS filter via 'active' <a> status?
I'm struggling by trial and error.
Here are what I think are the relevant sections of code pertaining to all discussed above:
My dropdown is based on the following code.
JS in the page head:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myDropdownJS() {
document.getElementsByClassName("navbarDROPDOWN-JS")[0].classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementsByClassName("navbarDROPDOWN-JS")[0];
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
My dropdown html in nav bar (most of the css is just design styling):
<span class="dropdown" onclick="myFunction()">
<a class="dropbtn navbarDROP-ICON" style="opacity:0.5; padding-top:0px;">menu</a>
<a class="dropbtn navbarDROP-TXT" style="opacity:0.5">menu </a>
<a class="dropbtn navbarDROP-TXT">Career Works by Date </a>
<div class="dropdown-content navbarDROPDOWN-JS" >
<a class="tag-bgd-INSTLLN" href="#">Installations (all media)</a>
<a class="tag-bgd-MOVIMG" href="#">Works with moving image (inc. vid/film releases)</a>
<a class="tag-bgd-SNDMUS" href="#">...with sound and music (inc. sound/music releases)</a>
<a class="tag-bgd-PHOTO" href="#">...with photographs</a>
<a class="tag-bgd-DRAW" href="#">...with drawing (inc. 2D works)</a>
<a class="tag-bgd-TXT" href="#">...with text</a>
<a class="tag-bgd-PERF" href="#">...with performative action</a>
<a class="tag-bgd-COLPUB" href="#">Collaborative and public works</a>
<a class="tag-bgd-OBJDEV" href="#">>Objects, garments, devices</a>
<a class="tag-bgd-EDPUB" href="#">Editions, publications</a>
<a class="tag-bgd-CAREER" href="#">Career Works by Date</a>
</div>
Above: the <a href> elements were going to contain URLs for alternatively styled pages. There is no need for these if I can enable the user to selectively show/hide parts of just this one page, via this dropdown.
The demo JS filter is based on the following code (via SO user the.marolie).
JS at page end:
var select = document.getElementById('media-selector-demo');
var filter;
select.addEventListener("change", function() {
filter = select.value;
var elements = document.querySelectorAll('.wk-date_ITEM');
elements.forEach((el) => {
var type = el.dataset.type.split(', ');
if (type.includes(filter)) {
el.classList.remove('hide-by-media');
} else {
el.classList.add('hide-by-media');
}
})
});
Demo JS filter CSS:
.hide-by-media {
display: none;
}
Demo JS filter html in page body:
<select id="media-selector-demo" name="filter">
<option value="INSTLLN"> Installations (all media)</option>
<option value="MOVIMG"> Works with moving image (inc. vid/film releases)</option>
<option value="SNDMUS" >...with sound and music (inc. sound/music releases)</option>
</select>
Example div in page body (there are 80-100 of these):
<!-- ++++++++++ START FULL-WIDTH LIST ENTRY '2017 STATE OF DREAD' ++++++++++ -->
<div id="state-of-dread" class="w3-container wk-date_ITEM" data-type="INSTLLN, SNDMUS">
<div class="w3-container wk-date_TXT-IMG">
<div class="wk-date_GRID">
<div class= "h3 wk-date_DATE"> 2017 </div>
<div class="wk-date_TTL"><h1>State of Dread</h1></div>
<div class="h2 wk-date_KIND-1" >Installation</div>
<div class="p wk-date_KIND-2" ><span class="sound">Sound</span>, for x2 interconnected rooms.<br>AB, CD, EF, Solo exhibition (as trio), Ohrenhoch sound gallery, Berlin.</div>
<div class="wk-date_IMG">
<div class="w3-container w3-right wk-date_IMG-BOX-LSCP">
<img src="../../imgs/INSTALLATION-EVENT/2017_dread_thmb.jpg"
alt="'xx' by Andrew Stones, installation view, xx"></div>
</div>
</div>
</div>
</div>
<!-- ++++++++++ END FULL-WIDTH LIST ENTRY '2017 STATE OF DREAD' ++++++++++ -->
Demo JS filter: JS at end of page:
<script type="text/javascript">
var select = document.getElementById('media-selector-demo');
var filter;
select.addEventListener("change", function() {
filter = select.value;
var elements = document.querySelectorAll('.wk-date_ITEM');
elements.forEach((el) => {
var type = el.dataset.type.split(', ');
if (type.includes(filter)) {
el.classList.remove('hide-by-media');
} else {
el.classList.add('hide-by-media');
}
})
});
</script>

What you would need to do is change the event listener from select, change to drop down element, click. you would also need to add the values of the options from the select as data-value attributes on the drop down elements.
1 - add a data-value attribute to the elements to represent what to hide
<a class="tag-bgd-INSTLLN" href="#" data-value="INSTLLN">
2 - target the drop down elements you want to attach the event listener to.
const dropDownElements = document.querySelectorAll('.dropdown-content a')
3 - attach event listeners to the selected targets (PS. the e in the function stands for event, click event listener produces an event object)
dropDownElements.forEach((dropDownElement) => {
dropDownElement.addEventListener('click',(e)=>{
const filter = e.target.dataset.value;
})
})
4 - the rest is just adding the rest of the filter used in the demo js filter
dropDownElements.forEach((dropDownElement) => {
dropDownElement.addEventListener("click", (e) => {
const filter = e.target.dataset.value
var elements = document.querySelectorAll(".wk-date_ITEM")
elements.forEach((el) => {
var type = el.dataset.type.split(", ")
if (type.includes(filter)) {
el.classList.remove("hide-by-media")
} else {
el.classList.add("hide-by-media")
}
})
})
})

Multiple toggling buttons and texts with a single function

$(document).ready(function(){
$("button").click(function(){
$("#answer").toggle(1000);
});
});
this only works for the IDs "answer" and "button", the challenge for me its getting multiple pairs of these IDs (answer1 - button1, answer2 - button2, and so on) to work with this single function

You haven't included the relevant HTML so I can only guess/assume what it might look like in my demo/example.
For multiple elements it is best to use a class to group them.
$(document).ready(function() {
$(".answerTog").click(function() {
$(this).prev('.answer').toggle(1000);
});
});
.Question {
display: block;
margin-bottom: 5px;
}
.answer {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Question">
<input type="text" placeholder="Question One" />
<span class="answer">Question One Answer.</span>
<button class="answerTog">See Answer</button>
</div>
<div class="Question">
<input type="text" placeholder="Question Two" />
<span class="answer">Question Two Answer.</span>
<button class="answerTog">See Answer</button>
</div>
<div class="Question">
<input type="text" placeholder="Question Three" />
<span class="answer">Question Three Answer.</span>
<button class="answerTog">See Answer</button>
</div>
If your button is before the answer then you can simply use
$(this).next('.answer').toggle(1000);
$(this) will target the specific element used to trigger the function call, in this instance the button being clicked.
.prev('.answer') will target the previous element with the class name of answer
.next('.answer') will target the next element with the class name of answer
JsFiddle Demo
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!

You are currently using an ID property to call that button ($('#')) You want to call them by classes.
IDs should be unique and only used in 1 DOM element.
Trying to use ID the script will only pick the 1st element it comes across; and the code will only work for that one button.
With classes you create an Object for all of your elements, with jQuery you just have to call the element by its class, and run the code normally - I note this because in JS you would have to add the index to the element call.
For example:
<canvas id="main"></canvas>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<script>
var canvas = $('#main'), // return 1 element
elements = $('.elem'); // return 3 elements
</script>
So for anything that involves multiple elements you must call them by class or tag name.
In vanilla JS you would look at something like this:
<script>
var elem = document.querySelectorAll('.elem');
console.log(elem[0]);
</script>
So, your code would then just need to call those elements by class; and you can set custom classes for different purposes.
$(document).ready(function() {
var btns = $('.btn');
btns.click(function() {
btns.toggle(1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>

In javascript, how do I remove previously clicked sibling div, so that only one answer displays at a time?

I must use a for loop to go through the h2 elements in the array and remove the class attribute for all h2 elements that aren’t the one that has been clicked. I also need to remove the class attributes for all of the div siblings of the h2 elements that weren’t clicked, but I am not sure how to do this. The code I am trying to use is under the "//remove all other answers" comment. Please help me out, thanks!
var toggle = function() {
var h2 = this; // clicked h2 tag
var div = h2.nextElementSibling; // h2 tag's sibling div tag
// toggle plus and minus image in h2 elements by adding or removing a class
if (h2.hasAttribute("class")) {
h2.removeAttribute("class");
} else {
h2.setAttribute("class", "minus");
}
// toggle div visibility by adding or removing a class
if (div.hasAttribute("class")) {
div.removeAttribute("class");
} else {
div.setAttribute("class", "open");
}
//remove all other answers
var faqs = $("faqs");
var h2Elements = faqs.getElementsByTagName("h2");
for (var i = 0; i < h2Elements.length; i++ ) {
if(!h2Elements.onclick) {
h2.removeAttribute("class", "minus");
} else {
h2Elements.onclick;
}
}
};
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2><a href="#" >What is JavaScript?</a></h2>
<div id="1">
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2>What is jQuery?</h2>
<div id="2">
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h2>Why is jQuery becoming so popular?</h2>
<div id="3">
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>

This example should accomplish what you've outlined in your question. Here I'm looping through all H2 elements and processing the one that was clicked separately.
$('h2').on('click',function(){
var thisH2 = this;
$('h2').each(function(){
if (this === thisH2){
if ($(this).next().is(":visible")){
$(this).removeClass('plus').addClass('minus');
$(this).next().hide();
}else{
$(this).removeClass('minus').addClass('plus');
$(this).next().toggle();
}
}else{
$(this).removeClass('plus').addClass('minus');
$(this).next().hide();
}
});
});
h2{
cursor:pointer;
}
h2:hover{
text-decoration:underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2 class="minus">What is JavaScript?</h2>
<div class="answer" style='display:none'>
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2 class="minus">What is jQuery?</h2>
<div class="answer" style='display:none'>
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h2 class="minus">Why is jQuery becoming so popular?</h2>
<div class="answer" style='display:none'>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>

There is an easy common pattern for your type of problem. Give all questions a single, shared classname. Then on click
use document.getElementsByClassName with the shared classname and apply css display:"none" (or a class that achieves this style) on all elements
set display:"block" or display:"inline" on the current selection

You've wrapped all this code in your toggle function, but the function is not called anywhere.
You should attach the event listener to your h2 tags after defining them with jQuery.
The order of your set/remove attributes is a little off.
Try coming this working example to your code:
var h2 = $("h2");
h2.on('click', function() {
for (var i = 0; i < h2.length; i++) {
if (h2[i] !== this) {
h2[i].setAttribute('class', 'red');
} else {
h2[i].removeAttribute('class', 'red');
}
}
})
I've use the example class red here if you wanted to say, toggle the color in your CSS. You can use whatever class here in place of my example.

Hope this helps. What I have done is I hide all div(and remove class red from all h2 tag other than one which is click in for loop) and toggle clicked h2 and it's sibling.
function func(e){
var x=document.getElementsByClassName("ans");
for(var i=0;i<x.length;i++){
if(x[i].classList.value.indexOf("hide")<0 && x[i]!==e.nextElementSibling){
x[i].classList.toggle("hide");
x[i].previousElementSibling.classList.toggle("red");
}
}
e.classList.toggle("red");
e.nextElementSibling.classList.toggle("hide");
}
.red{
background-color:red;
}
.hide{
display:none;
}
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2 onclick="func(this)"><a href="#" >What is JavaScript?</a></h2>
<div id="1" class="ans hide">
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2 onclick="func(this)">What is jQuery?</h2>
<div id="2" class="ans hide">
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h2 onclick="func(this)">Why is jQuery becoming so popular?</h2>
<div id="3" class="ans hide">
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>

To help you identify your sections from your Subheadings
Add this to all sections you can use different identifiers
I'd suggest adding a class or attribute
<h2>What is JavaScript?</h2>
<div class="section" id="1">
This will enable us to select all the divs will the class section
const sections = document.querySelectorAll('.section')
Then we can loop over them all and add the minus class I'd suggest just adding this in the mark up if you intend this to be your default state.
sections.forEach(el => {
el.classList.add('minus')
});
Now we can loop over all your anchor tags I'd suggest giving them an identifier such as a class to separate them from other anchor tags but the example i'll just select all the anchor tags.
We attach a function reference to the on click of the element called openSection which we'll define shortly.
document.querySelectorAll('a').forEach((el, index) => {
el.onclick = openSection;
})
Now, this is the function that will toggle your minus and remove it from other items
Your function gets passed an event which will contain the information we need to get the correct section to hide. We loop through the sections and remove minus with toggle if it matches the element clicked and then any other item if it doesn't have minus it gets added on to make sure it's hidden.
function openSection(e) {
// we use - 1 because lists start at 0
const el = e.srcElement.classList.value - 1;
sections.forEach((section, index) => {
if (index === el) {
section.classList.toggle('minus')
} else if (!section.classList.contains('minus')) {
section.classList.add('minus')
}
})
}
Working example
https://codepen.io/anon/pen/KoWgwm
Stuff used
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Determining which element was clicked and conditionally choosing which method to call

I am attempting to use JQuery to make 3 thumbnails into buttons that each open up their own page element with details regarding the picture.
Right now I have succeeded in making it so that any thumbnail causes a page element (of the class "description") to scroll open and closed when any thumbnail (from the class "thumbnail") is clicked.
How do I check which thumbnail is clicked on so that I can open a different description corresponding to that specific thumbnail? (This is what I was attempting to do with the "select").
var main = function() {
$('.thumbnail').click(function(select) {
var description = $('.game-descriptions').children('.description');
if( description.is(":hidden")) {
description.slideDown("slow");
}
else
description.hide();
});
}
$(document).ready(main);

Use a data attribute to specify what the thumbnail click is targeting, example: data-target="#game-1", add IDs to your descriptions that match and use data() to use the attribute value of #game-1 a jQuery selector.
Here is a demo
JS
$('.thumbnail').click(function() {
var gameId = $(this).data('target');
$(gameId).slideToggle().siblings(':visible').slideToggle();
});
HTML
<img class="thumbnail" data-target="#game-1" />
<img class="thumbnail" data-target="#game-2" />
<div class="game-descriptions">
<div id="game-1" class="description"></div>
<div id="game-2" class="description"></div>
</div>
Any toggling like toggle(), slideToggle(), fadeToggle() handles the is hidden or is visible

jsFiddle
The parameter to the click function is a jQuery event object, which can be useful in adding some event handling logic. However, within the context of the handler, this refers to the element which triggered the click event, and is typically sufficient for any targeted logic.
Assuming the thumbnails and descriptions have similarly named IDs, for example, you can do something like this:
$(function () {
$('.thumbnail').click(function (event) {
var descId = this.id.replace("thumb", "desc");
var description = $('.game-descriptions').children('#' + descId);
// or simply $("#" + descId);
description.toggle("slow");
});
});
HTML
<div>
<div class="thumbnail" id="thumb-1">Thumb 1</div>
<div class="thumbnail" id="thumb-2">Thumb 2</div>
<div class="thumbnail" id="thumb-3">Thumb 3</div>
</div>
<div class="game-descriptions">
<div class="description" id="desc-1">Description One</div>
<div class="description" id="desc-2">Description Two</div>
<div class="description" id="desc-3">Description Three</div>
</div>
Your technique for targeting the correct 'description' will depend on your actual DOM structure, however.
Also note that I substituted the toggle method for your if statement, as the logic you have is equivalent to what it does (i.e. toggling object visibility).

How to take element from collection by specific class name using jQuery?

I have to make a slider control using jQuery. In each slide you can have a content like images, paragraphs and so on.
<div class="slide first current">
<h1>Ninja Superman slide</h1>
<p>Here's some text.</p>
<img src="http://blogs.telerik.com/images/default-source/miroslav-miroslav/super_ninja.png?sfvrsn=2" width="300" height="300">
</div>
<div class="slide">
<h1> Ninja Samurai</h1>
<p>Here's some text about ninja samurais</p>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRVNH4RuAsomFkrv9tWiz_VBaCbVSWbC7gDXtOag9e7K_JHuC6zZR5Es-Y" width="500" height="300">
</div>
<div class="slide last">
<h1>The birth of a ninja</h1>
<p>Some text about the birth of a ninja from egg.</p>
<img src="http://forums.academy.telerik.com/?qa=blob&qa_blobid=5564423925526764256" width="300" height="300">
</div>
I have 2 buttons for previous and next slide.
<input type="button" id="prev-btn" value="Previous slide" />
<input type="button" id="next-btn" value="Next slide" />
On each div (slide content) I have a class "slide", so I can locate is as a slide. I'm made a collection by taking all the elements from document with class "slide".
var $slides = document.getElementsByClassName("slide");
Now I have to make a function onNextButtonClick(), that will change my slides. But I don't know how to take the current slide. I have a class "current", given on first element by default. So my question is: how to take an element from collection with specific attribute. Something like that:
var $currentSlide = $slides[element.class == "current"];

Since you use jQuery, I think you better should use jQuery selector to select element.
You can select element with several class by:
var $slides = $(".slide.current");
You can find out infomation about how to choose element according to class, attribute or state here
enter link description here

If the elements with the class current are child nodes of $slides, the following code will select them all:
$('.current', $slides)
The second parameter to the call of the $ function is the scope for the selector.
If you want to get the first element of all the matched elements, you can do this as follows:
$('.current', $slides)[0]
You can see a demonstration here.

To select the current slide you can use
$(".current")
also, you can try out jQuery orbit if you want a simple way to make a slider
http://zurb.com/playground/orbit-jquery-image-slider

Best to use the jQuery/sizzle selectors.
var $slides = document.getElementsByClassName("slide");
becomes
var $slides = $(".slide");
var $currentSlide = $slides.filter(".current");

You can add class to the buttons to get the click event
<input class="next-prev-btn" type="button" id="prev-btn" value="Previous slide" />
<input class="next-prev-btn" type="button" id="next-btn" value="Next slide" />
After that get the click event
$(".next-prev-btn").on('click',function(){
// get the clicked button's id
var clickedButton = $(this).attr('id');
$('.slide').each(function() {
if($(this).hasClass('current'))
{
// here you will get the div which have current class
// your business logic
// you can get your clicked button also by
if(clickedButton=='prev-btn')
{
// your logic for previous button click
}
else
{
// your logic for next button click
}
// if you are done with your functionality you can break the look here to prevent unwanted execution through the loop
break;
}
});
});

Perhaps you should use a toggle(); ?
Use jQuery! Add to head:
http://www.w3schools.com/jquery/jquery_install.asp
Working on jQuery is more easy and faster.