We Keep Coding

Read More Function for unordered list using jQuery with Paragraph

I'm a beginner, and trying to understand everything. I tried using <p> and it works smoothly but when I insert a text like a ul and li it wont show up
I also tried using a div but only the <a> part is working not the ul and li. I hope someone can help me.
$(document).ready(function() {
$(".more-less").click(function() {
$(this).parent().prev('ul.more').toggleClass("main");
if ($(this).parent().prev('ul.more').hasClass('main')) {
$(this).text('Read Less');
} else {
$(this).text('Read More');
}
});
});
.more {
text-align: left !important;
display: none;
}
.more-less {
/* position: absolute; */
/* right: -30px; */
/* top: -34px; */
color: #e43330 !important;
text-align: center;
float: left;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p style="text-align: left;">First paragraph then cuts...
<p class="more">Second paragraph.</p>
<p><strong>Header key roles</strong></p>
<ul class="more">
<li>trait 1</li>
<li>trait 2</li>
<li>trait 3</li>
<li>trait 4</li>
<li>trait 5</li>
</ul>
<a class="more-less">Read More</a>
<p> end paragraph</p>
strong text

There's two main issues in your code. Firstly the ul.more is not a parent element of the clicked p, so parents().next() isn't the correct traversal logic to use. As the target element is a sibling of the one which raised the event, use siblings().
Secondly, you need to set display: block on the hidden ul. You can do this through CSS, on the .main class which you toggle.
Also note that you cannot nest p elements. I corrected this in the example below by converting the containing element to a div.
jQuery($ => {
$(".more-less").click(function() {
let $more = $(this).siblings('ul.more').toggleClass("main");
if ($more.hasClass('main')) {
$(this).text('Read Less');
} else {
$(this).text('Read More');
}
});
});
.more {
text-align: left !important;
display: none;
}
.more.main {
display: block;
}
.more-less {
color: #e43330 !important;
text-align: center;
float: left;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
First paragraph then cuts...
<p class="more">Second paragraph.</p>
<p><strong>Header key roles</strong></p>
<ul class="more">
<li>trait 1</li>
<li>trait 2</li>
<li>trait 3</li>
<li>trait 4</li>
<li>trait 5</li>
</ul>
<a class="more-less">Read More</a>
<p> end paragraph</p>
</div>

Try delete display: none; from more class

jQuery: "data-target" toggle function – show only one content area

In general, my code (below) works. But: If you click at first "Link 1", and then for example "Link 2", only the content for Link 2 should be visible.
How is it possible to code that?
$("li").click(function() {
$($(this).data("target")).toggle();
// hide all other content areas
})
body {
display: flex;
cursor: default;
}
.left,
.right {
width: 50%;
height: 100vh;
overflow-y: scroll;
}
.left {
background-color: azure;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul>
<li data-target=".one">Link 1</li>
<li data-target=".two">Link 2</li>
<li data-target=".three">Link 3</li>
</ul>
</div>
<div class="right">
<div class="content one">Content for Link 1</div>
<div class="content two">Content for Link 2</div>
<div class="content three">Content for Link 3</div>
</div>
Would be very thankful for help! <3

If you're looking to keep the ability to toggle the one you clicked, you can use
var target = $($(this).data("target"));
$(".content").not(target);
target.toggle();
to find all the content divs except the target one.
If you just want to show the clicked one then you can hide all the others, (as provided in the other answer).
Updated snippet:
$("li").click(function() {
var target = $($(this).data("target"));
$(".content").not(target).hide();
target.toggle();
})
body {
display: flex;
cursor: default;
}
.left,
.right {
width: 50%;
height: 100vh;
overflow-y: scroll;
}
.left {
background-color: azure;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul>
<li data-target=".one">Link 1</li>
<li data-target=".two">Link 2</li>
<li data-target=".three">Link 3</li>
</ul>
</div>
<div class="right">
<div class="content one">Content for Link 1</div>
<div class="content two">Content for Link 2</div>
<div class="content three">Content for Link 3</div>
</div>

You're targetting a single <div> each time... there's nothing in your code to "reset" the other ones.
Try this, which first hides all the <div> elements, and then shows your selected one...
$("li").click(function() {
$(".content").hide();
$($(this).data("target")).show();
})
$("li").click(function() {
$(".content").hide();
$($(this).data("target")).show();
})
body {
display: flex;
cursor: default;
}
.left,
.right {
width: 50%;
height: 100vh;
overflow-y: scroll;
}
.left {
background-color: azure;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left">
<ul>
<li data-target=".one">Link 1</li>
<li data-target=".two">Link 2</li>
<li data-target=".three">Link 3</li>
</ul>
</div>
<div class="right">
<div class="content one">Content for Link 1</div>
<div class="content two">Content for Link 2</div>
<div class="content three">Content for Link 3</div>
</div>
Note, if you need the content to disappear if you click the <li> a second time, this will not work, as it will always show the item you've clicked.
If you need it to disappear, see the answer by freedomn-m

Unable to remove class after using toggle class with jQuery

I have three navigations in one page and I'm trying to show the active links for each nav. For some reason the third nav isn't working correctly. For example, if you click on "chapter 2" or "chapter 3" or "chapter 4", "chapter 1" stays active. I don't know if it's because "Chapter 1" and "sublink4" from the middle nav have the same url. I tried removing the active class of the third nav, but it's not working. Unfortunately the snipping isn't working as it is on my computer. I only used target="_blank" on the snippet, not only my local machine since you can't click on links on the snippet without restarting the snippet.Thanks
$(window).on('load', function () {
$('body').setActiveMenuItem();
$('body').setActiveMenuItem2();
$('body').setActiveMenuItem3();
});
$(document).ready(function () {
//first nav
$.fn.setActiveMenuItem2 = function () {
$.each($('.nav1').find('li'), function () {
$(this).toggleClass('active',
window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
});
}
//middle nav
$.fn.setActiveMenuItem3 = function () {
$.each($('.nav3').find('li'), function () {
$(this).toggleClass('active3',
window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
});
}
//third nav
$.fn.setActiveMenuItem = function () {
$.each($('.nav2').find('li'), function () {
$(this).removeClass('active2');
$(this).toggleClass('active2',
window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
});
}
});
li.active {
background-color: red;
}
li.active2 {
background-color: blue;
}
li.active {
background-color: yellow;
}
.nav1 ul, .nav3 ul {
display: flex;
justify-content: space-between;
}
nav {
margin-bottom: 50px;
}
.wrapper {
width: 400px;
margin: auto;
}
li {
list-style: none;
background-color: aliceblue;
padding: 10px;
}
li a {
padding: 10px;
}
li a:hover {
color: red;
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<nav class="nav1">
<ul>
<li> Link 1 </li>
<li><a href="/link-2" target="_blank" >Link 2</a> </li>
<li>Link 3 </li>
<li>Link 4 </li>
</ul>
</nav>
<nav class="nav3">
<ul>
<li>Subink 1</li>
<li>Subink 2</li>
<li>Subink 3</li>
</ul>
</nav>
<nav class="nav2">
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
</nav>
</div>

-> replace $ to j Query
->Either replace a latest jquery

Use preventDefault to let default event handler to open new link.
window.open() will let you open links in new tabs.
Note: This code won't work in sand-boxes.
Let me know if I'm missing something?
var links = document.querySelectorAll('a');
links.forEach((node) => {
node.addEventListener("click", (evt) => {
evt.stopPropagation();
evt.preventDefault();
evt.target.classList.add('active');
window.open(evt.target.href);
});
});
li.active {
background-color: red;
}
li.active2 {
background-color: blue;
}
li.active {
background-color: yellow;
}
.nav1 ul,
.nav3 ul {
display: flex;
justify-content: space-between;
}
nav {
margin-bottom: 50px;
}
.wrapper {
width: 400px;
margin: auto;
}
li {
list-style: none;
background-color: aliceblue;
padding: 10px;
}
li a {
padding: 10px;
}
li a:hover {
color: red;
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<nav class="nav1">
<ul>
<li> Link 1 </li>
<li>Link 2 </li>
<li>Link 3 </li>
<li>Link 4 </li>
</ul>
</nav>
<nav class="nav3">
<ul>
<li>Subink 1</li>
<li>Subink 2</li>
<li>Subink 3</li>
</ul>
</nav>
<nav class="nav2">
<ul>
<li>Chapter 1</li>
<li>Chapter 2</li>
<li>Chapter 3</li>
</ul>
</nav>
</div>

Arrow pointing to the correct direction when click expan/collapse all

I did the "expand/collapse all" function, everything is working well, except the arrow. It doesn't pointing to the correct direction. I'm not sure how to do that, so I leave it empty on my code. My issue is shown below.
(Red box represents the click action)
Click "View all", can see the expanders are opened. The arrows pointing down.
Click "A" to collapse the expander, and the arrow pointing up.
Click "Collapse all", the expanders are collpased. Now you can see my problem, "A" arrow is pointing up and the rest are pointing down.
Hoping that some of you could provide me with some advice. Thanks!
$(".aq_epdtitle").click(function() {
$('.aq_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle1").click(function() {
$('.aq_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle2").click(function() {
$('.aq_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".expandall").click(function() {
$('.aq_expandct').slideDown().toggleClass('active');
$('.aq_expandct1').slideDown().toggleClass('active');
$('.aq_expandct2').slideDown().toggleClass('active');
});
$(".collapseall").click(function() {
$('.aq_expandct').slideUp().removeClass('active');
$('.aq_expandct1').slideUp().removeClass('active');
$('.aq_expandct2').slideUp().removeClass('active');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
display: none;
padding : 5px;
}
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position:right 0px;
cursor:pointer;
padding: 0 10px;
margin: 10px 0;
}
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
<li class="mobexpand collapsed">
<div class="aq_epdtitle">A</div>
<ul class="aq_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="aq_epdtitle1">B</div>
<ul class="aq_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="aq_epdtitle2">C</div>
<ul class="aq_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>

Just add $('.mobexpand').addClass('collapsed'); ($(".expandall").click) in show all function
and $('.mobexpand').removeClass('collapsed'); ($(".collapseall").click) and in collsapse all function as bellow
$(".aq_epdtitle").click(function() {
$('.aq_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle1").click(function() {
$('.aq_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle2").click(function() {
$('.aq_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".expandall").click(function() {
$('.aq_expandct').slideDown().toggleClass('active');
$('.aq_expandct1').slideDown().toggleClass('active');
$('.aq_expandct2').slideDown().toggleClass('active');
$('.mobexpand').removeClass('collapsed');
});
$(".collapseall").click(function() {
$('.aq_expandct').slideUp().removeClass('active');
$('.aq_expandct1').slideUp().removeClass('active');
$('.aq_expandct2').slideUp().removeClass('active');
$('.mobexpand').addClass('collapsed');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
display: none;
padding : 5px;
}
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position:right 0px;
cursor:pointer;
padding: 0 10px;
margin: 10px 0;
}
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
<li class="mobexpand collapsed">
<div class="aq_epdtitle">A</div>
<ul class="aq_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="aq_epdtitle1">B</div>
<ul class="aq_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="aq_epdtitle2">C</div>
<ul class="aq_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>

Hiding and displaying content with jQuery

I'm trying to change the content on a page depending on which link is clicked. My problem is that once the content for a link is displayed it wont disappear if another link is clicked even if I have set it to display none when the other link is clicked. The display: block is overwriting the display: none.
For those of you suggesting I use .show() and .hide() I appreciate your help but I don't think this method will be best for me as I need to add a class to the elements so I can animate it later. Thanks
jQuery(document).ready(function() {
jQuery('#link_one').click(function() {
jQuery('#about_us').addClass('hide');
jQuery('#why_us').addClass('hide');
jQuery('#our_prods').addClass('hide');
jQuery('#accreditations').addClass('show');
});
jQuery('#link_two').click(function() {
jQuery('#why_us').addClass('hide');
jQuery('#accreditations').addClass('hide');
jQuery('#our_prods').addClass('hide');
jQuery('#about_us').addClass('show');
});
jQuery('#link_three').click(function() {
jQuery('#about_us').addClass('hide');
jQuery('#our_prods').addClass('hide');
jQuery('#accreditations').addClass('hide');
jQuery('#why_us').addClass('show');
});
});
nav {
width: 100%;
text-align: center;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
font-size: 40px;
margin: 0 10px;
}
p {
font-size: 30px;
font-weight: bold;
}
div {
width: 100%;
text-align: center;
}
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a id="link_one" href="#">link 1</a></li>
<li><a id="link_two" href="#">link 2</a></li>
<li><a id="link_three" href="#">link 4</a></li>
</ul>
</nav>
<div id="about_us">
<p>About Us Page - to be displayed by default</p>
</div>
<div id="accreditations">
<p>Accreditations Page Content - Link 1</p>
</div>
<div id="our_prods">
<p>Our products - Link 2</p>
</div>
<div id="why_us">
<p>Why us content - link 3</p>
</div>
https://codepen.io/Reece_Dev/pen/gWdEoJ

what I'd do and recommend doing:
HTML
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<div class="pageContainer" id="uniqueID">
<!-- content -->
</div>
jQuery
$(document).ready(function()
{
$('.link').on('click', function()
{
$('.pageContainer').addClass('hide');
$('#'+ $(this).data('target')).removeClass('hide');
});
});
what this will do is, when anything with class .link is clicked, add a class ('hide') to all elements that have the class .pageContainer. Then it will remove the class from the div with the id that matches the target (a console.log of the $('#'+ $(this).data('target')) should result in $('#why_us') - if the why_us link was clicked
data is an attribute you can attach to elements, data-* - * can be anything you want, but makes more sense to call it something related. calling .data() will get an array of all available data tags on the element, doing .data('string') will get the data element that matches data-string.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/data-*

With your actual code you are not toggling the hide and show classes correctly.
You can just use jQuery .hide() and .show() methods, instead of adding and removing classes:
$(document).ready(function() {
$('#link_one').click(function() {
$('#about_us').hide();
$('#why_us').hide();
$('#our_prods').hide();
$('#accreditations').show();
});
$('#link_two').click(function() {
$('#why_us').hide();
$('#accreditations').hide();
$('#our_prods').hide();
$('#about_us').show();
});
$('#link_three').click(function() {
$('#about_us').hide();
$('#our_prods').hide();
$('#accreditations').hide();
$('#why_us').show();
});
});
Demo:
$(document).ready(function() {
$('#link_one').click(function() {
$('#about_us').hide();
$('#why_us').hide();
$('#our_prods').hide();
$('#accreditations').show();
});
$('#link_two').click(function() {
$('#why_us').hide();
$('#accreditations').hide();
$('#our_prods').hide();
$('#about_us').show();
});
$('#link_three').click(function() {
$('#about_us').hide();
$('#our_prods').hide();
$('#accreditations').hide();
$('#why_us').show();
});
});
nav {
width: 100%;
text-align: center;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
font-size: 40px;
margin: 0 10px;
}
p {
font-size: 30px;
font-weight: bold;
}
div {
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a id="link_one" href="#">link 1</a></li>
<li><a id="link_two" href="#">link 2</a></li>
<li><a id="link_three" href="#">link 4</a></li>
</ul>
</nav>
<div id="about_us">
<p>About Us Page - to be displayed by default</p>
</div>
<div id="accreditations">
<p>Accreditations Page Content - Link 1</p>
</div>
<div id="our_prods">
<p>Our products - Link 2</p>
</div>
<div id="why_us">
<p>Why us content - link 3</p>
</div>

use jquery show hide function instead of addClass. as when you add hide class to already added show element, display block will override display none. instead use this.
jQuery('#link_one').click(function() {
jQuery('#about_us').hide();
jQuery('#why_us').hide();
jQuery('#our_prods').hide();
jQuery('#accreditations').show();
});
jQuery('#link_two').click(function() {
jQuery('#why_us').hide();
jQuery('#accreditations').hide();
jQuery('#our_prods').hide();
jQuery('#about_us').show();
});
jQuery('#link_three').click(function() {
jQuery('#about_us').hide();
jQuery('#our_prods').hide();
jQuery('#accreditations').hide();
jQuery('#why_us').show();
});

Your problem is that you're never removing the class, so once you click a link it has both the hide and show classes. And because the show class is later in your css, it overrides the hide class.
You can add .removeClass('show') at the end of your changes. Like
jQuery('#our_prods').addClass('hide').removeClass('show');
An easier method might be to use the show() and hide() jQuery methods, and not worry about swapping the classes.
jQuery('#link_two').click(function() {
jQuery('#why_us').hide();
jQuery('#accreditations').hide();
jQuery('#our_prods').hide();
jQuery('#about_us').show();
});

The issue is that you're now removing the class show when you're trying to hide the content.
Also, the better way to that is by using the jquery hide and show functions.
The script changes to this :
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#link_one').click(function() {
jQuery('.content').hide()
jQuery('#accreditations').show()
});
jQuery('#link_two').click(function() {
jQuery('.content').hide()
jQuery('#our_prods').show()
});
jQuery('#link_three').click(function() {
jQuery('.content').hide()
jQuery('#why_us').show()
});
});
</script>
And we added a class content to the page containers.
<nav>
<ul>
<li><a id="link_one" href="#">link 1</a></li>
<li><a id="link_two" href="#">link 2</a></li>
<li><a id="link_three" href="#">link 4</a></li>
</ul>
</nav>
<div id="about_us" class="content show">
<p>About Us Page - to be displayed by default</p>
</div>
<div id="accreditations" class="content">
<p>Accreditations Page Content - Link 1</p>
</div>
<div id="our_prods" class="content">
<p>Our products - Link 2</p>
</div>
<div id="why_us" class="content">
<p>Why us content - link 3</p>
</div>
The updated Css :
<style type="text/css">
nav {
width: 100%;
text-align: center;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
font-size: 40px;
margin: 0 10px;
}
p {
font-size: 30px;
font-weight: bold;
}
div {
width: 100%;
text-align: center;
}
.content{
display: none;
}
.show{
display: block;
}
</style>