We Keep Coding

On click, find next element by class name

I have a mobile menu, and when the user clicks the span with the class of "open", the next footer-menu-accordion opens. However, it also opens when the user clicks on the anchor link "level-1" Men.
What I am trying to do right now, is when the user clicks Men I would like to use jquery to find the NEXT footer-menu-accordion and keep it as display:none (which is the parent div containing the level-2 anchor tags). I know I have to use jquery's next() or find() methods, but I'm not sure how to do it. Can anyone help me out?
function mobileMainNav() {
$('a.level-1.direct').click(function(e) {
window.location = $(this).attr('href');
});
}
mobileMainNav();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile-menu" class=" footer-menu-accordion ">
<div class="dropdown-container ">
<a class="level-1 direct">Men</a>
<span class="open">img</span>
</div>
<div class="footer-menu-accordion ">
<a class="level-2 "></a>
<ul></ul>
<a class="level-2 "></a>
<ul></ul>
<a class="level-2 "></a>
<ul></ul>
</div>
</div>
I wrote this so when I click on level-1, I am directed to the "mens" section of my website. This works fine, however when I clicik level-1 I do not want the next dropdown to open, which it currently does. So I know I need to add some more jquery into this function to do so, I'm just not sure how as I am new to jQuery. Thank you in advance!

I'm not sure if you want to get the nearest footer for your anchor tag with the class level-1 or not ... if so try this :
function mobileMainNav() {
$('a.level-1').click(function(e) {
var nearestFooter = $(this).parent().siblings('div.footer-menu-accordion');
console.log(nearestFooter[0]);
});
}
mobileMainNav();
<div id="mobile-menu" class="footer-menu-accordion">
<div class="dropdown-container">
<a class="level-1">Men</a>
<span class="open">img</span>
</div>
<div class="footer-menu-accordion">
<a class="level-2"></a>
<ul></ul>
<a class="level-2"></a>
<ul></ul>
<a class="level-2"></a>
<ul></ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
also you don't have element with the class (.direct)

Hide/show expands all divs when I want it to open one at a time

I am making a page that is responsive and is pulling content from wordpress. There are 4 photos and in each photo is a button displaying "whats in the bag" and "player history." When you click each button I want it to display the hidden div content below the photo. Right now when I click the button it opens all of the divs instead of the 1 player I want to show. Here is the script I am using
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
return false;
});
});
$(document).ready(function(){
$(".slidingDiv2").hide();
$(".show_hide2").show();
$('.show_hide2').click(function(){
$(".slidingDiv2").slideToggle();
return false;
});
});
Here is the html
<div class="popup-open">
<div class="title"><?php the_title(); ?></div>
WHAT'S IN THE BAG<br/>
PLAYER HISTORY
</div>
</div>
<div class="slidingDiv">
<div id="tabs-1">
<div class="witb-tab">
<?php
$fields = CFS()->get('witb');
if($fields) :
foreach ($fields as $field) : ?>
<div class="row">
<a target="_blank" href="<?php echo $field['cta_link'];?>">
<div class="image">
<img src="<?php echo $field['product_image'];?>" alt="<?php echo $field['product_name'];?>">
<a target="_blank" class="product-name" href="<?php echo $field['cta_link'];?>" title="<?php echo $field['product_name'];?>">
<?php echo $field['product_name'];?>
</a>
</div>
</a>
</div>
<?php endforeach; endif; ?>
</div>
CLOSE
</div>
</div>
<div class="slidingDiv2">
<div class="column left">
<!-- post thumbnail -->
<?php
if (has_post_thumbnail()) {
the_post_thumbnail('profile-thumb');
}
// Check if post thumbnail exist
else {
$values = CFS()->get('gender');
if (is_array($values)) {
foreach ($values as $value => $label) {
//echo '<h1 style="color:red">' . $value . '</h1>';
echo '<img src="' . get_bloginfo('template_directory') . '/img/thumb-'. $value . '.png"' . 'alt="thumbnail" />';
}
}
}
?>
<!-- /post thumbnail -->
<div class="player-biography">
<?php echo CFS()->get('player_biography'); ?>
</div>
</div>
<div class="column right">
<div id="tabs-2">
<div class="content-wrap"><?php the_content(); // Dynamic Content ?></div>
</div>
CLOSE
</div>
</div>

I believe you are looking for the this selector.
let's say you have something like:
<div class="item">
<h1>Item1</h1>
<div class="show_hide">
Popping in and out 1.
</div>
</div>
<div class="item">
<h1>Item2</h1>
<div class="show_hide">
Popping in and out 2.
</div>
</div>
you can do
$('.item').click(function() {
$(this).children('.show_hide').slideToggle();
});
JSFiddle
var main = function() {
$('.show_hide').hide();
$('.item').click(function() {
$(this).children('.show_hide').slideToggle();
});
}
$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="item">
<h1>Item1</h1>
<div class="show_hide">
Popping in and out 1.
</div>
</div>
<div class="item">
<h1>Item2</h1>
<div class="show_hide">
Popping in and out 2.
</div>
</div>

Instead of targeting the class in your on-click function try using "this". You also dont need more than one ready function. Just so you know, the problem with your code is that you're targeting all elements of the class. You could also use IDs to target specific elements.
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(this).parents('.slidingDiv').slideToggle();
return false;
});
$(".slidingDiv2").hide();
$(".show_hide2").show();
$('.show_hide2').click(function(){
$(this).parents('.slidingDiv2').slideToggle();
return false;
});
});

you can try something like this
$(document).ready(function(){
// hide all divs class starts with slidingDiv
$("div[class^='slidingDiv']").hide();
// show all anchor class starts with show_hide
$("a[class^='show_hide']").show();
// anchor click event
$(".title > a[class^='show_hide']").on('click', function(e){
e.preventDefault(); // prevent to reload
// slide up all divs starts with slidingDiv but not the slidingDiv with index with <a> .. that mean if you click a with index() 0 it will hide all slidingDiv divs and show slidingDiv with index 0 and 1 for 1 and son on
$("div[class^='slidingDiv']").not($("div[class^='slidingDiv']").eq($(this).index())).slideUp();
$("div[class^='slidingDiv']").eq($(this).index()).slideToggle();
});
});
DEMO
more clear demo
DEMO
use this code instead of all your js code you posted
be sure to include jquery inside <head></head> or before closing </body> and after that run your code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
ok complete code inside <head></head> or before </body> should be like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide all divs class starts with slidingDiv
$("div[class^='slidingDiv']").hide();
// show all anchor class starts with show_hide
$("a[class^='show_hide']").show();
// anchor click event
$(".title > a[class^='show_hide']").on('click', function(e){
e.preventDefault(); // prevent to reload
// slide up all divs starts with slidingDiv but not the slidingDiv with index with <a> .. that mean if you click a with index() 0 it will hide all slidingDiv divs and show slidingDiv with index 0 and 1 for 1 and son on
$("div[class^='slidingDiv']").not($("div[class^='slidingDiv']").eq($(this).index())).slideUp();
$("div[class^='slidingDiv']").eq($(this).index()).slideToggle();
});
});
</script>

Because the selector .className affects all elements in the DOM with such class. What you will want to do is go from your clicked <a> and use the structure of your DOM to get the element you want by looking at it's parent's parent:
$('.show_hide').click(function(){
$(this).parent().parent(".slidingDiv").slideToggle();
return false;
});
In this case you only need a single show-hide class and a single slideingDiv class. It's not necessary to have slideingDiv, slideingDiv2, slideingDiv3, ... As it takes away the point of using classes in the first place, and they might as would be ids. The structure is the same, simply with the same classes:
<div class="slidingDiv">
<div id="tabs-1">
...
CLOSE
</div>
</div>
<div class="slidingDiv">
<div id="tabs-2">
...
CLOSE
</div>
</div>
...
Fiddle Example

How to change color of div on link click and then when other link is clicked, another div changes color, previous is set to default color

I have a link that lieds me to specific <div> on my page. This is a page content. When i click on link, send me to specific place on my page (title of table). I'd like, that when i click on that link, the <div> (title of table) is colored red. Then when i click on another link (another <div> and another title of table) previous <div> is colored back in black and new <div> is colored red...etc.
This is my code so far:
<html>
<body>
<table>
<tr>
<button onclick="SetAllTitleColorToBlack()">Refresh page</button>
<td>
<div id="kazalo" height="50" style="padding-left:25; font-size:16px"> <b><u>Page content:</u></b>
<b><ul>
<li> link to one </li>
<li> link to two </li>
<li> link to three </li>
<li> link to four </li>
<li> link to five </li>
</ul></b>
</div>
</td>
<script> <!-- script, da kazalo strani sledi strani, če gremo dol, gre tudi kazalo dol -->
$(window).scroll(function () {
$('#kazalo').stop().animate({
'marginTop': $(window).scrollTop() + 'px',
'marginLeft': $(window).scrollLeft() + 'px'
}, 'slow');
});
var totaltext = '';
for (var i = 0; i < 100; i++) {
if (window.CP.shouldStopExecution(1)) {
break;
}
totaltext += 'scroll!<br />';
}
window.CP.exitedLoop(1);
$('#div2').html(totaltext);
</script>
<td style="padding-left:50">
<div id="one"> one </div>
<div id="two"> two </div>
<div id="three"> three </div>
<div id="four"> four </div>
<div id="five"> five </div>
</td>
</tr>
</table>
</body>
</html>
So when i click on "link to one" page moves me to <div> with id="one" and title "one" must be colored red. If i click now on "link to three", page moves me to <div> with id="three" and title "three" must be colored red, title "one" must be colored in default color, so black in this case.
I also need a refresh button, when i click on this button, all colors of titles are set to default (black) color.
Thanks for or the help

You can just do:
div:target {
color:red;
}
to color divs when clicked with css.
For reset you could just make a empty link reset
Here is a working example.

You could add / remove an class (active for example) to the specific div. The example below shows this - you would however need to make some minor changes.
First Part
<li> <a class="navLink" href="#one"> link to one </a></li>
<td id="myContent" style="padding-left:50">
<div id="one"> one </div>
<div id="two"> two </div>
<div id="three"> three </div>
<div id="four"> four </div>
<div id="five"> five </div>
</td>
Javascript
<script>
$('.navLink').click(function() {
$(".active").removeClass("active");
$($(this).attr('href')).addClass("active");
});
</script>
Css
<style>
.active { background-color: rgba(0,0,0,0.5); }
</style>
Working fiddle:
https://jsfiddle.net/y05ub9bk/

Accordion div. Open a specific link from another page

The following is in TestPage1.html
<p class ="User">
<a name="H1"></a>HEADING1</p>
<div class="description" style="display:none">
--CONTENT OF THE PANEL---
</div>
<p class ="User">
<a name="H2"></a>HEADING2 </p>
<div class="description" style="display:none">
--CONTENT OF THE PANEL---
</div>
When the user clicks on Heading1 or Heading2, the content collapses/expands.
The following content is in another page (Testpage2.html). So when I click on the link, it is supposed to open the content in HEADING1.
LINK
Here is the JQUERY:
$(document).ready(function() {
$(".description").hide();
$(".User").click(function() {
$(this).next(".description").slideToggle(500); });
$(".User").click(function(event){
window.location.hash=this.hash;
});
});
</script>
Any help is appreciated.

how to show and hide inner divs onclick upto 3 levels?

I have following structure in my page
HTML:
<div style="position:relative; width:200px; height:100px; overflow:hidden;">
<div style="position:absolute;" id="innerDiv">
<table style="width:400px;height:50px;" border="1" id="innerTable">
<tr>
<td>
<div id="td1"class="monthDiv" style="white-space:nowrap;">
2000
</div>
<div id="td2" style="white-space:nowrap;">
<table>
<tr><td id="quarter1">JAN-JUN00</td><td id="quarter2">JUL-DEC00</td></tr>
</table>
</div>
</td>
<td>
<div id="w" style="white-space:nowrap;">
2001
</div>
</td>
</tr>
</table>
</div>
</div>
JAVASCRIPT:
$("#td1").click(function(){
$("#td1").hide('slow');
$("#td2").show('slow');
});
$("#td2").click(function(){
$("#td2").hide('slow');
$("#td1").show('slow');
});
$("#quarter1").click(function(){
});
$("#quarter2").click(function(){
});
So, when I click on 'td1'(2000) I am showing 'td2'(JAN-JUN00 AND JUL-DEC00)' and viceversa but I need to show another div(JAN00 FEB00 ... JUN00) when click on 'quarter1'. Also I need to find on which div click event was fired, 'quarter1' or 'quarter2' to show (JUL00 AUG00 ... DEC00)
Please help me.

You can simply call a show event on the div you want to display on click of quarter1:
$("#quarter1").click(function(){
alert('quarter1');
$('#quart1').show('slow');
});
$("#quarter2").click(function(){
alert('quarter2');
$('#quart2').show('slow');
});
quart1 and quart2 are the ids of the divs you want to display.
EDIT:
Add this:
$("#td1").click(function(e){
e.stopPropagation();
$("#td1").hide('slow');
$("#td2").show('slow');
});
$("#td2").click(function(e){
e.stopPropagation();
$("#td2").hide('slow');
$("#td1").show('slow');
});