We Keep Coding

List with toggle div show/hide

The idea is that the user can either download the file by clicking download or view it as a png in browser by clicking open/show/whatever.
I used a solution found on here to achieve a show/hide toggle div function. It worked perfectly for one list item, but I'm trying to find a way to use this with a list of about 30 entries. I know I could just copy and paste the code and make new classes for the divs and anchors but surely there's a better way. I'm new to web development so I apologise if the solution is an obvious one.
Here is an example. I want each entry to control it's own div toggle (click on open).
$('.list-link').click(function() {
$('.test-div').show(500);
$('.list-link').hide(0);
$('.Hide').show(0);
});
$('.Hide').click(function() {
$('.test-div').hide(500);
$('.list-link').show(0);
$('.Hide').hide(0);
});
.list-entry {
background-color: darkgrey;
width: 200px;
margin-bottom: 10px;
list-style: none;
}
.test-div {
width: 200px;
height: 100px;
background-color: blue;
display: none;
}
.Hide {
display: none;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<ul class="list">
<li class="list-entry">
<p> test 1</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</li>
<div class="test-div"></div>
<li class="list-entry">
<p> test 2</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
</li>
<div class="test-div"></div>
<li class="list-entry">
<p> test 3</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
</li>
<div class="test-div"></div>
</ul>
https://codepen.io/pen/RwgaxRQ
Thanks in advance.

To do what you require you can use jQuery's DOM traversal methods, such as closest() and find(), to relate the element that raised the click event to those around it which you want to affect.
Also note that your HTML is invalid. ul can only contain li elements, not div, so you need to change the structure slightly.
With that said, try this:
$('.list-link').click(function() {
let $li = $(this).closest('li');
$li.find('.test-div').show(500);
$li.find('.list-link').hide();
$li.find('.Hide').show();
});
$('.Hide').click(function() {
let $li = $(this).closest('li');
$li.find('.test-div').hide(500);
$li.find('.list-link').show();
$li.find('.Hide').hide();
});
.list-entry {
background-color: darkgrey;
width: 200px;
margin-bottom: 10px;
list-style: none;
}
.test-div {
width: 200px;
height: 100px;
background-color: blue;
display: none;
}
.Hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="list">
<li class="list-entry">
<p> test 1</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
<li class="list-entry">
<p> test 2</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
<li class="list-entry">
<p> test 3</p>
<div class="links">
<a class="download-link" href="">download</a>
<a class="list-link">open</a>
<a class="Hide">hide</a>
</div>
<div class="test-div"></div>
</li>
</ul>
Also note that I updated the demo to use jQuery v3.6.0, as 2.1.4 is very outdated.

How can I not add a class to a specific block?

How not to add a class to a block that does not have a class of foot-items? When I click on "Link", still the foot-active class is added and removed, even though this foot-menu does not have a class of foot-items, like the b condition was written.
$(document).on('click', '.foot-title', function(e){
if ($('.foot-menu').hasClass('foot-items')) {
$(this).parent().toggleClass('foot-active');
}
});
html, body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
</div><!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
I also tried through .each(), but it did not work out.
$('.foot-title').each(function() {
$(this).click(function() {
$('.foot-menu').each(function(i) {
if ($(this).hasClass('foot-items')) {
$(this).toggleClass('foot-active');
}
});
});
});

$(document).on('click', '.foot-items.foot-menu', function(e){
$(this).toggleClass('foot-active');
});
html, body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
</div><!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>
If your aim is to add click event only with class foot-items and foot-menu, You can change your click event on .foot-items.foot-menu. No need to trigger it each time.

When checking for the class foot-items you need to do it based on the clicked element so you need to do:
$(this).parent()
Hope this helps :)
$(document).on('click', '.foot-title', function(e){
if ($(this).parent().hasClass('foot-items')) {
$(this).parent().toggleClass('foot-active');
console.log(".foot-active added or removed");
}
});
html, body {
margin: 0;
padding: 0;
}
.link {
text-decoration: none;
color: #ddd;
}
.menu {
display: none;
}
.foot-active .menu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foot-menu foot-items">
<div class="foot-title">
More
</div>
<div class="menu">
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
<div class="menu-item">
<a href="#">
<span class="link">
Lorem 1
</span>
</a>
</div>
</div><!-- .b-menu -->
</div>
<div class="foot-menu">
<div class="foot-title">
Link
</div>
</div>

Why jquery toggleClass() only works in even siblings?

I have DOM like this in a Rails app:
<div class="post_info">
<div class="col">
<i class="post_comments">icon</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments.</li>
</ul>
</div>
My target is hide and show '.comments_body' element right below the '.post_comment' icon which I clicked.
I've tried this:
css
.comments_body {
display: none;
}
.active {
display: block;
}
What I was trying to is target the icon's 'grandparent's next sibling', means the comments_body relating to this icon, then toggle it's display style.
my jquery code:
<script>
$(".post_info").click(function(event) {
$(event.target).parent().parent().next().toggleClass('active');
});
</script>
But it turns out this only works on even comments_body like the 2nd ,4th ,6th ,8th.
I checked dev tool, when I click on odd icon, the event wasn't be triggered.
How to solve this? Or is there better way to achieve this effect?
Update:
I tried the answers below but still not work. I put the page's github address here. Since it's a Rails app, you might need to clone it to local and try it. If so, run seed to generate fake data. Thanks!

First, you need to remove the : from this:
.comments_body: { /* <==== Remove that : */
display: none;
}
Then, this within your event handler is the .post_info element, so you can use that instead of $(e.target).parent().parent() which is inherently fragile (both because a small change to your markup breaks it, and because if you click within the .post_info but outside the icon, it will be wrong — which I suspect is why you're seeing the inconsistent behavior).
$(".post_info").click(function(event) {
$(this).next().toggleClass('active');
});
Live Example:
$(".post_info").click(function(event) {
$(this).next().toggleClass('active');
});
.comments_body {
display: none;
}
.active {
display: block;
}
<div class="post_info">
<div class="col">
<i class="post_comments">icon 1</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments 1.</li>
</ul>
</div>
<div class="post_info">
<div class="col">
<i class="post_comments">icon 2</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments 2.</li>
</ul>
</div>
<div class="post_info">
<div class="col">
<i class="post_comments">icon 3</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments 3.</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Side note: You might consider using event delegation for that handler rather than hooking the event on each individual .post_info. That way, if you add and remove .post_info instances at runtime, the handler will keep working.
Presumably these are in some kind of container, so you'd use:
$("selector-for-the-container").on("click", ".post_info", function(event) {
$(this).next().toggleClass('active');
});
Live Example:
$("#container").on("click", ".post_info", function(event) {
$(this).next().toggleClass('active');
});
// Works on #4 even though we add it later:
setTimeout(function() {
$("#container").append(
'<div class="post_info">' +
'<div class="col">' +
'<i class="post_comments">icon 4</i>' +
'</div>' +
'</div>' +
'<div class="comments_body">' +
'<ul>' +
'<li>Many comments 4.</li>' +
'</ul>' +
'</div>'
);
}, 800);
.comments_body {
display: none;
}
.active {
display: block;
}
<div id="container">
<div class="post_info">
<div class="col">
<i class="post_comments">icon 1</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments 1.</li>
</ul>
</div>
<div class="post_info">
<div class="col">
<i class="post_comments">icon 2</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments 2.</li>
</ul>
</div>
<div class="post_info">
<div class="col">
<i class="post_comments">icon 3</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments 3.</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$(".post_info").click(function(event) {
$(event.target).parent().parent().next().toggleClass('active');
});
.comments_body {
display: none;
}
.active {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post_info">
<div class="col">
<i class="post_comments">icon</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments.</li>
</ul>
</div>
<div class="post_info">
<div class="col">
<i class="post_comments">icon</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments.</li>
</ul>
</div>
<div class="post_info">
<div class="col">
<i class="post_comments">icon</i>
</div>
</div>
<div class="comments_body">
<ul>
<li>Many comments.</li>
</ul>
</div>
I have made a example for you. It working fine. I dont see any problem in case of even odd selection. try making important your active element as
.active {
display: block !important;
}
if it still not creating desired result kindly let me know. I will put my code here. Cheers....

Toggle between two div tags using javascript

I'm facing problem with toggle using JQuery between two divs. I don't have much knowledge with JQuery.
I want to display div1(create) when clicking a create and should hide div2(insert). In the same way when I click insert it should display div2(insert) and hide div1(create). Can some one please help me with this?
This is the code for anchor tags
#Start of div tag1
<div id="first"><h2 align="center">Array Operations</h2><br><br><br>
Creation<br>
Insertion<br>
</div> #End of div1
This the code for div tags
<div id="second"> #Start of div tag2
<div class="create">
<ul class="nav nav-tabs" id="myTab">
<li class="active">C++</li>
</ul>
<div class="tab-content">
<div id="cpp" class="tab-pane fade in active">
<h3>#Creating an array in C++</h3>
<p>#include < iostream > <br>
using namespace std;<br>
int a [10]</p>
</div>
</div>
</div> #End of create div
<div class="insert">
<ul class="nav nav-tabs" id="myTab">
<li class="active">C++</li>
</ul>
<div class="tab-content">
<div id="cpp" class="tab-pane fade in active">
<h3>#Inserting an array in C++</h3>
<p>#include < iostream > <br>
using namespace std;<br>
int a [10]</p>
</div>
</div>
</div> #End of insert div
</div> #End of div tag2
This is css for first div tag
<script type="text/javascript">
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
<style>
#first {
width: 25%;
float: left;
height: 300px;
border-left: 1px solid gray;
border-top: 1px solid gray;
border-right: 1px solid gray;
}
#second {
width: 70%;
float: left;
height: 300px;
border-top: 1px solid gray;
}
</style>
This is the jquery
$('.insert').hide();
$('.create, .insert').on('click',
function() {
$('.create, .insert').toggle()
}
);

I added a class for all of the page sections called .panel that hides the panels by default (display: none;), and gave the first panel a class of .active which will show a panel. Then when you click on one of the links at the top, use the href attribute to target the class of the panel, remove .active from any panel you didn't click on, and add .active to the one you clicked on.
var $panels = $('.panel'),
$links = $('#first a');
$links.on('click',function(e) {
e.preventDefault();
var $target = $('.' + $(this).attr('href'));
$panels.not($target).removeClass('active');
$target.addClass('active');
})
.panel {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
<h2 align="center">Array Operations</h2><br><br><br>
Creation<br>
Insertion<br>
</div>
<div class="create panel active">
<ul class="nav nav-tabs" id="myTab">
<li class="active">C++</li>
</ul>
<div class="tab-content">
<div id="cpp" class="tab-pane fade in active">
<h3>#Creating an array in C++</h3>
<p>#include < iostream > <br> using namespace std;<br> int a [10]</p>
</div>
</div>
</div>
<div class="insert panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active">C++</li>
</ul>
<div class="tab-content">
<div id="cpp" class="tab-pane fade in active">
<h3>#Inserting an array in C++</h3>
<p>#include < iostream > <br> using namespace std;<br> int a [10]</p>
</div>
</div>
</div>

Here is some code using simple jQuery syntax to show/hide the divs you mentioned. You can test the code here --> https://jsfiddle.net/Lp8m2mry/
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ <!--jQuery function that fires when document is ready-->
$('a#create').click(function() { <!--jQuery function creates a click even listener on the a tag with id of create-->
$('div.create').show(); <!--jQuery function that applies the default display property to element-->
$('div.insert').hide(); <!--jQuery function that applies style of display:none to element -->
});
$('a#insert').click(function() {
$('div.insert').show();
$('div.create').hide();
});
});
</script>
<style>
div.create {
display: none;
}
div.insert {
display: none;
}
</style>
</head>
<body>
<div id="first"><h2 align="center">Array Operations</h2><br><br><br>
<a id="create" href="#">Creation</a><br>
<a id="insert" href="#">Insertion</a><br>
</div>
<div class="create">
<ul class="nav nav-tabs" id="myTab">
<li class="active">C++</li>
</ul>
<div class="tab-content">
<div id="cpp" class="tab-pane fade in active">
<h3>#Creating an array in C++</h3>
<p>#include < iostream > <br>
using namespace std;<br>
int a [10]</p>
</div>
</div>
</div>
<!--#End of create div-->
<div class="insert">
<ul class="nav nav-tabs" id="myTab">
<li class="active">C++</li>
</ul>
<div class="tab-content">
<div id="cpp" class="tab-pane fade in active">
<h3>#Inserting an array in C++</h3>
<p>#include < iostream > <br>
using namespace std;<br>
int a [10]</p>
</div>
</div>
</div>
<!--#End of insert div-->
</body>

clearfix doesn't work in angularJs

<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow">
<li ng-repeat="user in searchUserList">
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname" ng-bind="user.username"></div>
<span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname">fdsfsfds</div>
<span class="wm_search_uacc">fsdfds</span>
</div>
</a>
</li>
</ul>
.wm_clearfix3{
overflow: auto;
height: 1%;
}
I added a clearfix css class in my label,and it was working well when I had not add angular codes into my HTML.But when I added angular into HTML,the clearfix class became don't work.The cut picture like this:
Maybe because of 'ng-repeat'?Can somebody help me?

You don't need to add ng-class unless you are adding a class with logic. So just add class is enough

Why use 'ng-class' if you have not an angular expression ?
try with:
ng-class="{wm_clearfix3}"
or:
.wm_clearfix3{
overflow: auto;
height: 1%;
clear: both;
}

Does the solution at the below JSFiddle link help you out at all?
https://jsfiddle.net/6vm4csjb/
ul {
list-style: none;
}
[class*="wm_clearfix"] {
display: inline-block;
width: 100%;
}
[class*="wm_clearfix"]:before, [class*="wm_clearfix"]:after {
display: table;
content: " ";
}
img {
display: inline-block;
width: 20px;
height: 20px;
}
.pull-left {
float: left;
}
<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow">
<li ng-repeat="user in searchUserList">
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname" ng-bind="user.username"></div>
<span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);" class="wm_clearfix3">
<img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/>
<div class="pull-left wm_ml5">
<div class="wm_search_uname">fdsfsfds</div>
<span class="wm_search_uacc">fsdfds</span>
</div>
</a>
</li>
</ul>