We Keep Coding

How to search more complex list items in pure Javascript

At the moment, I am trying to make a search field for a project using javascript and for some reason my search code is not working. I attribute this to the complexity of the list items, to this point, what would be the proper Javascript code to search the H3 tags in the list below:
<ul class="results" list-style: none>
<li class="result">
<div class="container">
<div class='headline'>
<h3>a list item</h3>
</div>
</div>
</li>
<li class="result">
<div class="container">
<div class='headline'>
<h3>a list item 2</h3>
</div>
</div>
</li>
<li class="result">
<div class="container">
<div class='headline'>
<h3>a list item 3</h3>
</div>
</div>
</li>
</ul>

There must be better definition of: "I attribute this to the complexity of the list items, to this point, what would be the proper Javascript code to search the H3 tags in the list below:"
Most basic search:
document.querySelectorAll('h3'); // -> returning a nodelist with all the h3 elements in the dom
If you need to add more "complexity" then just change the selector in ('selector')
Otherwise please edit your question to be more precise what you want, like an example output.
UPDATE:
So if I understood correctly what you meant then a very very general example to just demonstrate what i guessing you mean
const getH3 = document.querySelectorAll('ul.results h3'); // here we get all the h3 inside the ul
// let us assume that in our "seach box" the term was '2' for example
const term = '2';
// what to do now? Since we got all our h3 already inside a const we can just go through all of them to check if the term is there, like for example with a forEach
// also creating here an array to push in all the matches
let matches = [];
getH3.forEach(h3 => {
if (h3.textContent.includes(term)) matches.push(h3); // here we push in if our search term was found inside the textContent of an h3 using the string method "includes"
// ofc you can also directly just push the found textContent or also both .-.
});
console.log(matches); // output: [h3]
console.log(matches[0].textContent); // output: a list item 2
UPDATE 2
so this should then answer general questions on this topic:
here the code with comments:
// for simplicity i will stick with the example from before with my 2 since its a pretty simple term :)
// so we doing the same things as before but with some modification
const getH3 = document.querySelectorAll('ul.results h3'); // keep in mind that this script should be executed
// after the dom loaded, otherwise getH3 will be [] empty
// getting our input field which i added to the html with the id
const search = document.getElementById('search'); // here the same with the loading
// so now we have several ways to make our "searching" for probably all ways we need some event
// this could be everytime we type something or when we click on a button etc.
// we will use the "input" or "change" event
// so adding the Eventlistener, could be achieved in two ways, i will use the addEventListener method
search.addEventListener('input', () => {
// everytime there is an input in the input element this function will be called
// since you dont need to work with the element, we dont need to save what we found, we will just make them the only ones left on the screen
// this can be achieved (in my opinion!) with giving or removing a class which makes them disappear or appear
// so we added a small css class with display:none
// now again we go through all h3
// so now it gets a bit weird since we used the h3, i will explain the other way underneath
getH3.forEach(h3 => {
if (h3.textContent.includes(search.value)) { // if the h3 should be displayed
h3.parentElement.parentElement.parentElement.classList.remove('invis') // dom traversing to the li element which holds the h3 to remove the class in case it was there
} else { // if the h3 shouldnt be displayed
h3.parentElement.parentElement.parentElement.classList.add('invis') // adding the class to the li so it disappear
}
});
/*
alternative we could also go through all the li or just use document.querySelector('ul.results>li')
to get all the li
like:
const getLi = document.querySelectorAll('ul.results>li');
getLi.forEach(li =>{
...
})
*/
})
in html added on top the ul:
<input id="search" type="text"> <!-- search box -->
And in css the class:
.invis {
display: none;
}
and here a example snippet you can run yourself to see how it works now:
const getH3 = document.querySelectorAll('ul.results h3');
const search = document.getElementById('search');
search.addEventListener('input', () => {
getH3.forEach(h3 => {
if (h3.textContent.includes(search.value)) h3.parentElement.parentElement.parentElement.classList.remove('invis');
else h3.parentElement.parentElement.parentElement.classList.add('invis');
});
})
.invis {
display: none;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Searching</title>
</head>
<body>
<input id="search" type="text"> <!-- search box -->
<ul class="results" list-style: none>
<li class="result">
<div class="container">
<div class='headline'>
<h3>a list item</h3>
</div>
</div>
</li>
<li class="result">
<div class="container">
<div class='headline'>
<h3>a list item 2</h3>
</div>
</div>
</li>
<li class="result">
<div class="container">
<div class='headline'>
<h3>a list item 3</h3>
</div>
</div>
</li>
</ul>
</body>
</html>

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

animate show/hide from css class

I'm new to JavaScript and jQuery so please be gentle with me. I'm trying to animate a show/hide of several divs based on if it has a certain class or not.
Basically, I'm creating a site for a photographer and have a portfolio section with a list of filters along the top, each div has a class of "portfolio-items" as well as additional classes for all the categories it's in, so family / wedding / kids / couples. any image can have multiple classes on it.
What I want to do is click on the family link and it hides anything that doesn't have the family class on it. If I then click on wedding it closes anything that's currently open that doesn't have the wedding class on it and opens anything thats currently closed that does have the wedding class on it.
I currently have it working with the code below but this simply closes everything and then opens the ones that have the class required. Plus I don't know how to add an animate to it.
function portfolioItems(filter) {
$(".portfolio-items").hide();
$("."+filter).show(); }
function initEventHandlers () {
$(".port-all").click(function () {
$(".portfolio-items").show();
return false;
})
$(".port-wedding").click(function () {
portfolioItems("wedding");
return false;
})
$(".port-family").click(function () {
portfolioItems("family");
return false;
})
$(".port-kids").click(function () {
portfolioItems("kids");
return false;
})
$(".port-couples").click(function () {
portfolioItems("couples");
return false;
}) }
The HTML is...
<div class="portfolio-container">
<div class="portfolio-links">
<img alt="All" class="port-all" src="images/port-all.png" />
<img alt="family" class="port-family" src="images/port-family.png" />
<img alt="wedding" class="port-wedding" src="images/port-wedding.png" />
<img alt="couples" class="port-couples" src="images/port-couples.png" />
<img alt="kids" class="port-kids" src="images/port-kids.png" />
</div>
<div class="portfolio">
<div class="portfolio-items wedding couples family"></div>
<div class="portfolio-items kids"></div>
<div class="portfolio-items wedding kids family"></div>
<div class="portfolio-items couples"></div>
<div class="portfolio-items couples kids family"></div>
<div class="portfolio-items wedding"></div>
</div>
</div>

First of all you may use not selectors(look here!) to avoid hiding all your photos. Just assign two classes to your blocks with photos. Something like this
<div class="portfolio-items wedding"></div>
<div class="portfolio-items family"></div>
<div class="portfolio-items kids"></div>
And then you can rewrite your portfolioItems function in this way
function portfolioItems(filter) {
$(".portfolio-items:not(."+filter+")").hide();
}
Secondly you may create one generic function for hiding some category, but not duplicating the same code by several times.

You can try this:
function portfolioItems(filter) {
$(".portfolio-items.not("+filter+")").fadeOut();
$("."+filter).fadeIn();
}

Here's an approach I've found useful for filtering via CSS. I like to use the data attribute on links to specify a filter. To start, set up a navigation with some links and a portfolio with some images or divs:
<!-- set up some navigation -->
<nav>
All Photos
Family Photos
Art Photos
Wombat Photos
</nav>
<!-- set up a portfolio -->
<div class="portfolio">
<div class="family item">Some family image or something</div>
<div class="art item"> Some art image or something</div>
<div class="wombats item">Some wombat image or something</div>
<div class="wombats item">Some wombat image or something</div>
<div class="art item"> Some art image or something</div>
</div>
Notice how each of the a tags has the class name you'd want to use as a filter as a data-filter attribute. You can specify multiple classes in here and it'll work just the same. For instance ".wombat.family" would let you use a DOUBLE filter in your portfolio.
Here's a script that will help you get set up to filter:
//on document ready
$(document).ready(function(){
//when you click <a> tag in the <nav>
$("nav a").click(function(e){
//if the <a> has a data-filter attribute
if($(this).attr("data-filter")){
//show all the .items with the class in the data-filter attribute
$(".portfolio .item"+$(this).attr("data-filter")).show(300);
//hide all the .items that do not have that class
$(".portfolio .item:not("+$(this).attr("data-filter")+")").hide(300);
}else{
//if there's no data-filter attribute, show all the images
$(".portfolio .item").show(300);
}
});
});
For this one, I'm simply using a time in the show() and hide() functions, but fadeIn() fadeOut() might work for you as well.
To enable the "all" filter, I simply didn't write a data-filter attribute for that particular a tag and made sure JS knew what to do (check the if/else).
The important thing to remember is the link between the class used on the portfolio item and the data-filter attribute. Pretty simple to get started, though I'm sure it'll get a little more complicated before you get finished :)
Here's a jsfiddle to play around: http://jsfiddle.net/w4VWm/
Good luck!

Hide all, add the new classname to a filter string then show by the filter string
http://jsfiddle.net/uhCY5/3/
var filters = "";
function portfolioItems(filter) {
filters += '.' + filter
$(".portfolio-items").hide();
$(filters).show();
$("#filter").text(filters)
}
function initEventHandlers() {
$(".port-all").click(function () {
filters = "";
$(".portfolio-items").show();
return false;
})
// the rest is the same
}

Not sure exactly what kind of transition you want, but this will do a fade in/out with very little jquery:
please note, you may be able to remove some of the stuff in the divs, but i didn't know what you needed for other things on the page
the fiddle: http://jsfiddle.net/Z5uXP/
<div class="portfolio-container">
<div class="portfolio-links">
<img alt="All" class="port-all" src="images/port-all.png" />
<img alt="family" class="port-family" src="images/port-family.png" />
<img alt="wedding" class="port-wedding" src="images/port-wedding.png" />
<img alt="couples" class="port-couples" src="images/port-couples.png" />
<img alt="kids" class="port-kids" src="images/port-kids.png" />
</div>
<div class="portfolio">
<div class="portfolio-items wedding couples family"></div>
<div class="portfolio-items kids"></div>
<div class="portfolio-items wedding kids family"></div>
<div class="portfolio-items couples"></div>
<div class="portfolio-items couples kids family"></div>
<div class="portfolio-items wedding"></div>
</div>
</div>
<script>
$(document).ready(function(){
var $container = $("div.portfolio-container"),
$portfolio = $container.find("div.portfolio");
$container
.on("click", ".portfolio-links a", function(event){
var $obj = $(this);
event.preventDefault();
$portfolio
.fadeOut()
.queue(function(next){
$($(this)[0]).css("color", "red")
.removeClass("family wedding couples kids")
.addClass($($obj[0]).data("type"));
next();
})
.fadeIn();
});
});
</script>
<style>
.portfolio .portfolio-items{
display: none;
}
.portfolio.all .portfolio-items,
.portfolio.family .portfolio-items.family,
.portfolio.wedding .portfolio-items.wedding,
.portfolio.couples .portfolio-items.couples,
.portfolio.kids .portfolio-items.kids{
display: block;
}
</style>

How to stay within a 'instance' using JQuery

I'm currently learning JavaScript/JQuery, but have an issue at work that I'm running into.
I've assigned a class of 'question' to an<a>tag, and 'answer' to a<div>. When a user clicks on the question, the answer will slide down. However, the problem I'm running into is that when they click on a <a href="#" class="question">, all of the <div class="answer">'s are displayed.
How can I make it so that only one .answer for it's parent .question is displayed when clicked?
Here is my HTML:
<li class="question">Question 1
<div class="answer"><p>This is answer for question 1</p></div></li>
<li class="question">Question 2
<div class="answer"><p>This is answer for question 2</p></div></li>
Here is my jquery:
<script>
jQuery(document).ready(function ($) {
$('div.answer').hide();
$('li.question').click(function() {
$('div.answer').slideDown('fast');
return false;
});
});
</script>
and the site is: http://topactioninvestments.com/faq/
Thanks!

$('li.question').click(function(e) {
$(this).find('div.answer').slideToggle('fast');
e.preventDefault();
});

Give every answer element an unique id attribute and add a data-answer attribute to the the the question that references the unique question.
The do the following.
$('li.question').click(function(e) {
$($(this).data("answer")).show();
});
To clarify with the relevant html.
<li class="question" data-answer="#answer-42">...</li>
<div class="answer id="answer-42">....</div>

What you typically want to do is have each unit within a container element. An example would be a div or other tag. Say your HTML looked like this:
<div class="qa">
<div class="question">What is 2+2?</div>
<div class="answer">4</div>
</div>
Then you could do:
$('.question').click(function(event) {
var target = $(event.target);
target
.closest('.qa')
.find('.answer')
.show();
});
Your markup for each question and answer looks like this:
<li>
<a><strong>Why do you not just sell these option contracts?</strong></a>
<div class="answer"><p>This is a test</p></div>
</li>
For this markup, this JavaScript would work:
$('li').on('click', function(event) {
$(this).find('.answer').show();
});
Demo: jsfiddle

What would fix a link within a div that is currently used as a clickable div

Hello I have a site I am working on an for this site I am making three panels flip when they are clicked on, you can think of it as a flip card concept. I have everything working but I realized that since the div itself is wrapped in an anchor tag and has a display of "block". What I have is the content inside that are links to external pages but since the div is clickable it only reads that anchor. I tried using the z-index but that doesn't seem to help as all.
This is my markup:
What is ElectedFace?
<div class="flip_content" id="flip1">
<div class="content-info">
<h5 style="text-align:center; font-size:20px; margin:3px 0 0 0; font-family:Arial, Helvetica, sans-serif;"><span class="blue">Elected</span><span class="red">face</span></h5>
<p>electedface is America's free social network delivering more real time news, faster than any other website.</p>
<p>electedface connects subscribers to their elected officials with active electedface accounts</p>
<p>electedface empowers subscribers to share their voice and turn social networking into constructive civil action.</p>
</div>
</div>
<a href="#" class="flip_switch" data-content_container="#flip2" data-flip_container="#flip_box2">
<div class="flipbox" id="flip_box2">
<h4>Getting Started</h4>
</div>
</a>
<div class="flip_content" id="flip2">
<div class="content-info">
<p> There are three ways to connect:</p>
<p>Read top news stories and Read local news stories</p>
<p>Connect to your elected officials and start a group in your community</p>
<p>Register for free membership</p>
</div>
</div>
<a href="#" class="flip_switch" data-content_container="#flip3" data-flip_container="#flip_box3">
<div class="flipbox" id="flip_box3">
<h4>Next Steps</h4>
</div>
</a>
<div class="flip_content" id="flip3">
<div class="content-info">
<p>Elected officials: activate your electedface account, connect to your electorate, and enlist supporters.</p>
</div>
</div>
Heres my Javascript
<script type="text/javascript">
$(function(){
$('.flip_switch').bind("click",function(){
var element = $(this);
var content = element.data("content_container");
var flip_container = element.data("flip_container");
var active_flipbox = $('.activeFlip');
if(element.hasClass('activeFlip')){
//If the flipbox is already flipped
flip_container.revertFlip();
}
else{
if(active_flipbox){
//Revert active flipbox
active_flipbox.revertFlip();
//Remove active status
active_flipbox.removeClass('activeFlip');
}
$(flip_container).flip({
direction: 'rl',
color: '#c8cbce',
content: $(content).html(),
speed:100,
onBefore: function(){
$(flip_container).addClass('activeFlip');
}
});
}
return false;
});
});
</script>

It seems to me your problem is so called bubbling
What you need is (most likely :) :
http://api.jquery.com/event.stopPropagation/