We Keep Coding

Get closest element with given id using javascript

I need to add a class to the closest div with a given id after I click the div above it. My example below should make more sense of what I need.
<style>
.menuContent {display:none;}
.expandMenu {display:inherit;}
</style>
<ul>
<li>
<div class="menuIcon" onclick="expandMenu('menuContent');">+</div>
<div id="menuContent" class="menuContent">
<p>This</p>
<p>That</p>
<p>The Other</p>
</div>
</li>
<li>
<div class="menuIcon" onclick="expandMenu('menuContent');">+</div>
<div id="menuContent" class="menuContent">
<p>This</p>
<p>That</p>
<p>The Other</p>
</div>
</li>
</ul>
This is the script I have so far that searches the class names of the given element and adds or removes the 'expandMenu' class when clicked.
<script>
function expandMenu(x) {
var d = document.getElementById(x);
var c = d.className;
if (c.search("expandMenu") === -1) {
d.className += " expandMenu";
} else {
d.className = c.replace(" expandMenu","");
}
}
</script>
This is all working fine, the issue is when clicking the 'menuIcon' in the second 'li', it's the first 'li' element that the script is applied too - it's obviously just finding the first 'menuContent' and applying the className function to it.
How can I limit the function to only apply to the 'menuContent' div that is directly after it.
I don't want to use jQuery either - good ol' fashioned plain Javascript would be great.

Give the menu icons unique ids, and pass that id to the function. Toggle based on the id, instead of the class. You are right, it is choosing the first one because it has found it when running through the code.

You should not have the same id on multiple elements. Try changing one of the id's and passing the new id to the function.
<style>
.menuContent {display:none;}
.expandMenu {display:inherit;}
</style>
<ul>
<li>
<div class="menuIcon" onclick="expandMenu('menuContent1');">+</div>
<div id="menuContent1" class="menuContent">
<p>This</p>
<p>That</p>
<p>The Other</p>
</div>
</li>
<li>
<div class="menuIcon" onclick="expandMenu('menuContent2');">+</div>
<div id="menuContent2" class="menuContent">
<p>This</p>
<p>That</p>
<p>The Other</p>
</div>
</li>
</ul>

Append a child element to another div while having a reference to the orginal parent element

I have this html code
<div id="left-container" class="w3-container w3-left">
<div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red">
<h1>Give</h1>
<h3>Selected Definition:</h3>
<ul style="display:none;">
<li> offer in good faith </li>
<li> inflict as a punishment </li>
<li> afford access to </li>
</ul>
</div>
<div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red">
<h1>Up</h1>
<h3>Selected Definition:</h3>
<ul style="display:none;">
<li> to a higher intensity </li>
<li> to a later time </li>
<li> used up </li>
</ul>
</div>
</div>
<div id="right-container" class="w3-container w3-right"></div>
I want the user, once he click on one of the wordDiv's, to be able to see the potential definitions of that word in the right container (which are found in the "ul" element of each "wordDiv"), select one of the definitions, then I want to display the selected definition in the original wordDiv in the left-container.
You can found Jsfiddle Demo Here

A solution using jQuery. Updated Fiddle
$(function() {
$('.wordDiv').click(function() {
var txt = $(this).find('ul').html();
$('#right-container').html('<ul>' + txt + '</ul>')
})
})

Please check this fiddle
I have added li elements to another div based on the div which you are selected.

You can use the jQuery this variable in the click function, here is a working jQuery example of your request Updated Fiddle
It puts the li elements in the right div AND adds the onclick listener, which has the knowlege of its origin ;)
$('h1').click(function(){
var origin=$(this);
$(this).siblings('ul').children().click(function(){
$(this).parent().hide();
$(origin).parent().append(this);
$(this).replaceWith($('<div>' + this.innerHTML + '</div>'))
})
$(this).siblings('ul').show();
$("#right-container").append($(this).siblings('ul'));
})
$('ldi').click(function(){
$(this).parent().hide();
$(this).parent().parent().append(this);
$(this).replaceWith($('<div>' + this.innerHTML + '</div>'))
})

Find element by class and toggle it

I have inside my html code repeating elements like this:
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div> <!-- synth-faq-content -->
</li>
and I use the following command so I can toggle the class 'content-visible' that will make this element slide to reveal the contents of <p>, in this case Text.
What I am trying to do is before doing this in my code, find the previous element that had a class of 'content-visible' and toggle it, so only one element remains visible at all times.
$(this).next('.synth-faq-content').slideToggle(200).end().parent('li').toggleClass('content-visible');
I tried various things lastly being
$(this).closest('synth-faq-trigger').next().find('.synth-faq-content').toggleClass('content-visible');
that has no effect at all. Moreover the suggestions from w3school on finding an element by class failed all together.
How can I make sure that I find all my items containing 'content-visible' and I remove this class from them?

I notice you are already using hash links in your example code, and because of this, you can achieve what you are trying without any JavaScript. Browsers already have functionality to handle displaying elements depending on the hash target, so let's exploit this browser feature rather than implementing it again in JavaScript.
Live demo: http://jsfiddle.net/g105b/cj5fscah/
The href of the anchor is to a hash link, which will be put into the URL bar of the browser. Each li element has an ID that corresponds to the hash targets, and using the :target CSS selector, you can style elements differently depending on what the hash is.
With some fancy CSS you can add animations too, that will perform much better than any JavaScript can.
<ul>
<li id="0">
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text for one</p>
</div> <!-- synth-faq-content -->
</li>
<li id="1">
<a class="synth-faq-trigger" href="#1">Link</a>
<div class="synth-faq-content">
<p class="filler">Text for two</p>
</div> <!-- synth-faq-content -->
</li>
<li id="2">
<a class="synth-faq-trigger" href="#2">Link</a>
<div class="synth-faq-content">
<p class="filler">Text for three</p>
</div> <!-- synth-faq-content -->
</li>
</ul>
ul {
width: 320px;
}
li {
background: #aaf;
}
.synth-faq-content {
overflow: hidden;
height: 0;
transition: height 200ms ease-in-out;
}
li:target .synth-faq-content {
height: 3em;
}
Edit: if you still need to manipulate the class names, a simple piece of JavaScript can trigger when the hash changes to accomplish having a class added to the correct LI element.
window.addEventListener("hashchange", function(e) {
// Remove all .content-visible elements:
[].forEach.call(document.querySelectorAll(".content-visible"), function(li) {
li.classList.remove("content-visible");
});
// Add .content-visible to the li that contains the clicked anchor:
document.querySelector("a[href='" + location.hash + "']").parentElement.classList.add("content-visible");
});
Updated demo: http://jsfiddle.net/g105b/cj5fscah/1/

You can use the sibling relation like
$('a').click(function() {
var $li = $(this).next('.synth-faq-content').slideToggle(200).closest('li').toggleClass('content-visible');
$('li.content-visible').not($li).removeClass('content-visible').find('.synth-faq-content').slideUp();
})
.content-visible > a {
color: green;
}
.synth-faq-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div>
<!-- synth-faq-content -->
</li>
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div>
<!-- synth-faq-content -->
</li>
<li>
<a class="synth-faq-trigger" href="#0">Link</a>
<div class="synth-faq-content">
<p class="filler">Text</p>
</div>
<!-- synth-faq-content -->
</li>
</ul>

Selector :not in jQuery not working

I have a body with ID body and inside it a div with class nav-container. I want to remove certain classes when users click on the #body, but not .nav-container (it's an overlay type of menu).
Tried below code
HTML:
<body id="body">
<div class="nav-container">
X
<nav class="display">
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</nav>
</div>
</body>
jQuery
$('#body :not(.nav-container)').click(function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});
It does not seem to be working for me though.

It wont work as not exclude the selected elements which pass the earlier css-selector criteria since .nav-container is not part of list that is selected by #body (wont be list in this case as its ID), so you wont be able to exclude that.
So basically what you need is
$(document).on("click", "div:not('.nav-container')",function() {
$('.cover').removeClass('active-cover');
$('.nav-container').removeClass('active');
});

the first element shouldn't be the parent, like #body, rather the element. for example div:not('example') works for every div except example.
$("div:not(.nav-container)").click(function() {
alert("nav-container was not clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body">
<div class="nav-container">
X
<nav class="display">
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</nav>
</div>
<br />
<div>click here </div>
</body>

Scroll to anchor within div of set height

I am hoping somebody can help me out with my Javascript. The JSFiddle shows you how far I have got, I'm not far off...but I am basically trying to get the content of the enclosed DIVs to align to the top of the '.news_window' box when the nav is clicked.
http://jsfiddle.net/s5sxa0sk/2/
I realise that the scrollTop going to 'this' is incorrect, but I don't know how else to proceed.
Any input would be very much appreciated.
The HTML:
<ul class="news_archive">
<li class="active">December</li>
<li>November</li>
<li>October</li>
</ul>
<div class="news_window">
<div id="dec_2014">
<p>December Content</p>
</div>
<div id="nov_2014">
<p>November Content</p>
</div>
<div id="oct_2014">
<p>October Content</p>
</div>
</div>
The Javascript:
<script>
$(".news_archive li").click(function(e){
e.preventDefault();
$('.news_window').animate({scrollTop:$(this).position().top}, 'slow');
$('.news_archive li.active').removeClass('active');
$(this).addClass('active');
});
</script>

Your main issues is you're using the #new_archive link's top position to animate the scroll instead of the #news_window item's top position. You need to find the #news_window element based on which link is clicked and use that element's position().top.
You will also need a wrapper around the #news_window items otherwise each element's position().top will change based on the current scroll position of the #news_window element. This wrapper will need position: relative set.
Here's what I mean:
<ul class="news_archive">
<li class="active">
<a data-id="dec_2014" href="#">December</a>
</li>
<li>
<a data-id="nov_2014" href="#">November</a>
</li>
<li>
<a data-id="oct_2014" href="#">October</a>
</li>
</ul>
<div class="news_window">
<div class="wrapper">
<div id="dec_2014">
<p>December Content</p>
</div>
<div id="nov_2014">
<p>November Content</p>
</div>
<div id="oct_2014">
<p>October Content</p>
</div>
</div>
</div>
And the Javascript:
$('.news_archive li a').click(function(e) {
e.preventDefault();
var newsWindowEl = $('#'+$(this).data('id'));
$('.news_window').animate({
scrollTop: newsWindowEl.position().top
}, 'slow');
$('.news_archive li.active').removeClass('active');
$(this).parents('li').addClass('active');
});
Here's a working version of your fiddle: http://jsfiddle.net/s5sxa0sk/42/