We Keep Coding

Simultaneously toggle active class in child li and at the same time toggle class in grand-parent div that matches the active child li class

I already know how to toggle the active class within each list item (li) when clicked.
But what I need is to copy the uniquely numbered class from the active li (example: .content-item-3.active) to the grand-parent div (.content-grand-dad) > (.content-grand-dad.content-item-3) when each li is toggled and active.
I do not mind if the code is through JQuery or Vanilla JavaScript.
$(document).ready( function() {
$('.content-item').click(function() {
$('.content-item.active').removeClass("active");
$(this).addClass("active");
});
});
.content-item {
cursor: pointer;
}
.content-item-1.active {
color: red;
}
.content-item-2.active {
color: blue;
}
.content-item-3.active {
color: green;
}
.content-item-4.active {
color: yellow;
}
.content-cousin {
display: none;
}
.content-grand-dad.content-item-1 ~ .content-cousin-1, .content-grand-dad.content-item-2 ~ .content-cousin-2, .content-grand-dad.content-item-3 ~ .content-cousin-3, .content-grand-dad.content-item-4 ~ .content-cousin-4 {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-grand-dad content-item-1">
<ul class="content-column">
<li class="content-item content-item-1 active">
<p>Line 1</p>
</li>
<li class="content-item content-item-2 ">
<p>Line 2</p>
</li>
<li class="content-item content-item-3 ">
<p>Line 3</p>
</li>
<li class="content-item content-item-4 ">
<p>Line 4</p>
</li>
</ul>
</div>
<div class="content-cousin content-cousin-1">
<h3>Word 1 </h3>
</div>
<div class="content-cousin content-cousin-2">
<h3>Word 2 </h3>
</div>
<div class="content-cousin content-cousin-3">
<h3>Word 3 </h3>
</div>
<div class="content-cousin content-cousin-4">
<h3>Word 4 </h3>
</div>

For my answer I replaced the numbered classes with a data attribute that holds the number.
Then on load I find the active item and show the corresponding cousin.
Then in my event handler, I simply remove an active class from the cousin, then add an active class to the appropriate cousin based on the selected data attribute.
I also have a new active class that is display block, without the need for the full list of css selectors as before.
Instead of referring to the classes, I also used nth-child to change the color of the items in the list so that way the ids can be more dynamic if needed.
$(document).ready( function() {
//load initial cousins
let active = $(".content-item.active").data("item");
$(".content-cousin[data-item='" + active + "']").addClass("active");
$('.content-item').click(function(e) {
$('.content-item.active').removeClass("active");
$('.content-cousin.active').removeClass("active");
$(this).addClass("active");
$(".content-cousin[data-item='" + $(this).data("item") + "']").addClass("active");
});
});
.content-item {
cursor: pointer;
}
.content-column .content-item.active:nth-child(1){
color: red;
}
.content-column .content-item.active:nth-child(2){
color: blue;
}
.content-column .content-item.active:nth-child(3){
color: green;
}
.content-column .content-item.active:nth-child(4){
color: yellow;
}
.content-cousin {
display: none;
}
.content-cousin.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-grand-dad">
<ul class="content-column">
<li data-item="1" class="content-item active">
<p>Line 1</p>
</li>
<li data-item="2" class="content-item">
<p>Line 2</p>
</li>
<li data-item="3" class="content-item">
<p>Line 3</p>
</li>
<li data-item="4" class="content-item">
<p>Line 4</p>
</li>
</ul>
</div>
<div data-item="1" class="content-cousin">
<h3>Word 1 </h3>
</div>
<div data-item="2" class="content-cousin">
<h3>Word 2 </h3>
</div>
<div data-item="3" class="content-cousin">
<h3>Word 3 </h3>
</div>
<div data-item="4" class="content-cousin">
<h3>Word 4 </h3>
</div>

multiple elements attached to one click event listener

what i want to happen is that on clicking one of the #playlist instances in the unordered list, it will take the corresponding instances inner text and use it to find the rest of the information, like the csv and cover. this is what i have so far but im not sure if im going in the right direction or how to continue. thanks
const playlistCover = document.querySelector('#playlist-cover');
const playlistName = document.querySelector('#playlist-name');
const playlistDuration = document.querySelector('#playlist-duration');
const playlistLength = document.querySelector('#playlist-length');
const playlistSize = document.querySelector('#playlist-size');
const playlistSelector = document.querySelectorAll('.playlist #playlist').forEach(item => {
item.addEventListener('click', event => {
loadPlaylist();
})
})
function loadPlaylist() {
playlistName.innerText = playlist
playlistCover.src = `static/playlists/${playlist}/cover.png`
playlistCSV = `static/playlists/${playlist}/${playlist}.csv`
}
<div class="playlists">
<h3>Playlists</h3>
<ul>
<li class="playlist">
<a id="playlist" href="#hyperpop">hyperpop</a><a id="options">...</a>
</li>
<li class="playlist">
<a id="playlist" href="#uk-rap">uk-rap</a><a id="options">...</a>
</li>
<li class="playlist">
<a id="playlist" href="#misc">misc</a><a id="options">...</a>
</li>
</ul>
</div>
<div class="main">
<div class="playlist-container">
<div class="info">
<div class="playlist-cover">
<img src="static/playlists/uk-rap/cover.png" alt="playlist-cover" id="playlist-cover">
</div>
<div class="playlist-details">
<div class="header">
<h1 id="playlist-name">uk-rap</h1>
</div>
<div id="playlist-data">
<p class="playlist-duration">6 hours 42 minutes</p>
<p class="playlist-songs">192 songs</p>
<p class="playlist-size">372.5 mb </p>
</div>
</div>
</div>
</div>
<script src="static/scripts/playlist loader.js"></script>
</div>

Here is a simplified version of your code.
The way it works is by making the information hidden by default.
Then, when you click on the name of the playlist, the information appears.
This is handled by toggling the hidden class by using elm.classList.toggle().
document.querySelectorAll(".playlist .info")
.forEach(p => p.parentElement.addEventListener(
"click",
() => p.classList.toggle("hidden"))
);
.hidden {
display: none;
}
li {
list-style: none;
}
.playlist>span:hover {
cursor: pointer;
font-weight: bold;
}
<div class="container">
<ul class="playlists">
<li class="playlist">
<span>UK-Rap</span>
<div class="info hidden">
<div class="duration">6 hours 42 mins</div>
<div class="songs">192 songs</div>
<div class="size">372.5 mb</div>
</div>
</li>
<li class="playlist">
<span>Jazz</span>
</li>
<li class="playlist">
<span>Pop</span>
</li>
</ul>
</div>

Changing div content when clicking buttons

I'm trying to make some sort of gallery on my website. There are 3 buttons, and underneath some text and picture are placed. When I click the button, I want that the content changes (to the content from button #2 etc.). How can I achieve that?
<ul>
<a href="">
<li>Btn1</li>
</a>
<a href="">
<li>Btn2</li>
</a>
<a href="">
<li>Btn3</li>
</a>
</ul>
<div class="list-first"">
<p class="list-first list-first-mobile">some text from first btn</p>
<img src="imgs/stock1.jpeg" alt="jpg from first btn" class="list-first-img">
</div>

Try this ,hope it helps
document.querySelectorAll('button').forEach((el, i) => {
el.addEventListener("click", () => {
document.querySelectorAll('p').forEach(ed => ed.style.display = "none")
el.nextElementSibling.style.display = "block"
})
})
<style>
.loc-caption:before {
content: attr(title);
display: block;
}
ul {
text-align: center;
padding: 0;
}
li {
width: 25%;
display: inline-block;
vertical-align: top;
}
li img {
max-width: 100%;
height: auto;
}
</style>
<ul>
<li class="loc-caption"><button>ClickME</button>
<p style="display:none" class="list-first list-first-mobile ">
<img src="https://chainimage.com/images/related-pictures-natural-sceneries-beautiful-wallpapers.jpg" alt="jpg from first btn " class="list-first-img "> some text from first btn
</p>
</li>
<li class="loc-caption"><button>ClickME2</button>
<p style="display:none" class="list-first list-first-mobile ">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwXvWYU5tYrokWILC7lgjmCYqYGvActZnt9q8AcPs4dR7hMTBR" alt="jpg from second btn " class="list-first-img "> some text from second btn
</p>
</li>
<li class="loc-caption"><button>ClickME3</button>
<p style="display:none" class="list-first list-first-mobile ">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzzP-CJnW3xuNeqqMcNLzK_IFPCywsEKifAWlajEzWcdALIDLI" alt="jpg from third btn " class="list-first-img "> some text from third btn
</p>
</li>
</ul>

A list of items does not show more and less items when click

Somehow my list of items does not show more or show less when clicking a button.
First you should see 3 items and a button with "+". Then when you click "+" the other items should show and then when clicking "-" the items limit back to 3 items again.
$(document).ready(function () {
var x = $("#list .content"),
y = "<span class='present'>+</span>";
x.find("a").length > 3 && (x.toggleClass("div_hide"), x.append(y)),
$(".present").click(function () {
$(this).parent().toggleClass("div_hide"), "-" == $(this).text()
? $(this).html("+")
: $(this).html("-")
#list .div_hide a:nth-child(n+3) {
display: none !important;
}
span.present {
display: block;
color: black;
background: yellow;
}
<h1>List</h1>
<div id="list">
<a class="content" href="#">one</a>
<a class="content" href="#">two</a>
<a class="content" href="#">three</a>
<a class="content" href="#">four</a>
<a class="content" href="#">five</a>
<a class="content" href="#">six</a>
</div>

I made an dynamic example based on your code.
var $listElements = $("#list a");
$listElements.hide();
$listElements.filter(':lt(2)').show();
$('#list').append('<a><span>+</span><span class="less">-</span></ai>');
$("#list").find('a:last').click(function(){
$(this).siblings(':gt(1)').toggle('slow');
$(this).find('span').toggle();
});
You can have as many content elements as you like
<h1>List</h1>
<div id="list">
<a class="content" href="#">one</a>
<a class="content" href="#">two</a>
<a class="content" href="#">three</a>
<a class="content" href="#">four</a>
<a class="content" href="#">five</a>
<a class="content" href="#">six</a>
</div>
https://jsfiddle.net/ahentea/jwLhd7o2/

look this ans i have do this with jquery
$(document).ready(function () {
var x = $("#list .content"),
y = "<span class='present'>+</span>";
$("#list .content:last-child").after(y);
$(".content").each(function(index){
if(index>=3){
$(this).addClass('toBeshow dNone');
}
});
$(document).on('click', '.present', function(){
$(".toBeshow").toggleClass('dNone');
});
});
span.present {
display: block;
color: black;
background: yellow;
}
.dNone{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>List</h1>
<div id="list">
<a class="content" href="#">one</a>
<a class="content" href="#">two</a>
<a class="content" href="#">three</a>
<a class="content" href="#">four</a>
<a class="content" href="#">five</a>
<a class="content" href="#">six</a>
</div>

Switching between three classes with different names

I have a header and three different classes defines three different sizes. On click of the different buttons I need to apply the size class to the header and remove the existing heading size class.
JS Fiddle
<div class="row">
<div class="col-sm-12">
<div class="layout-attachments">
<ul class="list-inline layout-components">
<li class="list-inline-item"><a id="smallHeader">S</a></li>
<li class="list-inline-item"><a id="mediumHeader">M</a></li>
<li class="list-inline-item"><a id="largeHeader">L</a></li>
</ul>
<h1 class="img-responsive img-thumbnail w-75-p">Change the class of this element</h1>
</div>
jQuery:
this.$('.list-inline-item').click(function() {
if ($('.layout-attachments h1').hasClass('w-50-p')) {
$('.layout-attachments h1').removeClass('w-50-p').addClass('w-75-p ');
} else if ($('.layout-attachments h1').hasClass('w-75-p ')) {
$('.layout-attachments h1').removeClass('w-75-p ').addClass('w-100-p');
} else if ($('.layout-attachments h1').hasClass('w-100-p')) {
$('.layout-attachments h1').removeClass('w-100-p').addClass('w-50-p');
}
});
});

This is very easy. Here i made an example.
Make sure to read the comment and also have a look at attribute Size
var sizes= ["w-75-p", "w-100-p", "w-50-p" ]
$('.list-inline-item').click(function() {
sizes.forEach((item)=> $('.layout-attachments h1').removeClass(item) ); // reset the size.
// now Add the right Size
$('.layout-attachments h1').addClass($(this).attr("size"))
});
.w-50-p {
font-size: 18px;
}
.w-75-p {
font-size: 26px;
}
.w-100-p {
font-size: 34px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-12">
<div class="layout-attachments">
<ul class="list-inline layout-components">
<li class="list-inline-item" size="w-50-p"><a id="smallHeader">S</a></li>
<li class="list-inline-item" size="w-75-p"><a id="mediumHeader">M</a></li>
<li class="list-inline-item" size="w-100-p"><a id="largeHeader">L</a></li>
</ul>
<h1 class="img-responsive img-thumbnail w-75-p">Change the class of this element</h1>
</div>
</div>

There are a couple of issues with your code. For starters, you have a syntax error in your jQuery block. You also don't need spaces after your class names in the removeClass calls. But the biggest issue is you need to be able to determine if the user has clicked "small", "medium", or "large" in order to apply the correct class. Otherwise, if you make the other corrections I mentioned, as it is right now you will basically just be toggling through the three classes.
Here's how I might approach the problem, with click handlers for each of the list elements (small, medium, large):
this.$('.list-inline-item').click(function(e) {
if (e.target.id === "smallHeader") {
// handle small case
$(".layout-attachments h1").removeClass("w-75-p w-100-p").addClass("w-50-p");
} else if (e.target.id === "mediumHeader") {
// handle medium case
$(".layout-attachments h1").removeClass("w-50-p w-100-p").addClass("w-75-p");
} else if (e.target.id === "largeHeader") {
// handle large case
$(".layout-attachments h1").removeClass("w-50-p w-75-p").addClass("w-100-p");
} else {
// unhandled case
}
});
.w-50-p {
font-size: 18px;
}
.w-75-p {
font-size: 26px;
}
.w-100-p {
font-size: 34px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-12">
<div class="layout-attachments">
<ul class="list-inline layout-components">
<li class="list-inline-item"><a id="smallHeader">S</a></li>
<li class="list-inline-item"><a id="mediumHeader">M</a></li>
<li class="list-inline-item"><a id="largeHeader">L</a></li>
</ul>
<h1 class="img-responsive img-thumbnail w-75-p">Change the class of this element</h1>
</div>
</div>
Another thing you could do, instead of calling removeClass with the other classes you don't want attached to the element, is add a function to jQuery that will remove all classes according to some substring. For example, with this function, you could remove all classes starting with "w-":
$.fn.removeClassStartingWith = function (filter) {
$(this).removeClass(function (index, className) {
return (className.match(new RegExp("\\S*" + filter + "\\S*", 'g')) || []).join(' ')
});
return this;
};
You could invoke it then like this:
$(".layout-attachments h1").removeClassStartingWith("w-").addClass("w-50-p");
This is not absolutely necessary but might be useful.

You had some errors in your jQuery:
$('.list-inline-item').on('click', function() {
if ($('.layout-attachments h1').hasClass('w-50-p')) {
$('.layout-attachments h1').removeClass('w-50-p').addClass('w-75-p');
} else if ($('.layout-attachments h1').hasClass('w-75-p')) {
$('.layout-attachments h1').removeClass('w-75-p ').addClass('w-100-p');
} else if ($('.layout-attachments h1').hasClass('w-100-p')) {
$('.layout-attachments h1').removeClass('w-100-p').addClass('w-50-p');
}
});
But either way the code doesn't make much sense as it is, because it doesn't matter what li item you click.
Edit:
html:
<div class="row">
<div class="col-sm-12">
<div class="layout-attachments">
<ul class="list-inline layout-components">
<li class="list-inline-item" data-size="w-50-p"><a id="smallHeader">S</a></li>
<li class="list-inline-item" data-size="w-75-p"><a id="mediumHeader">M</a></li>
<li class="list-inline-item" data-size="w-100-p"><a id="largeHeader">L</a></li>
</ul>
<h1 id="w-75-p" class="img-responsive img-thumbnail">Change the class of this element</h1>
</div>
</div>
jQuery:
$('.list-inline-item').on('click', function() {
var newSize = $(this).attr("data-size");
$(".layout-attachments h1").removeAttr("id").attr("id", newSize)
});
css:
#w-50-p {font-size: 18px;}
#w-75-p {font-size: 26px;}
#w-100-p {font-size: 34px;}
The easiest was is to use an id on the target element and set a data attribute which refers to the correct id.

You can do this:
<div class="row">
<div class="col-sm-12">
<div class="layout-attachments">
<ul class="list-inline layout-components">
<li class="list-inline-item"><a id="smallHeader" data-new-class="w-50-p">S</a></li>
<li class="list-inline-item"><a id="mediumHeader" class="active" data-new-class="w-75-p">M</a></li>
<li class="list-inline-item"><a id="largeHeader" data-new-class="w-100-p">L</a></li>
</ul>
<h1 class="img-responsive img-thumbnail w-75-p">Change the class of this element</h1>
</div>
</div>
there is an class="active" and data-new-class="w-75-p" that track what is currently clicked and what class to apply when click. You can find a better name for the data attribute.
For javascript:
$('.list-inline-item a').click(function() {
var $activeSize = $('.list-inline-item a.active');
// removes active from current
$activeSize.removeClass('active');
var $heading = $('.layout-attachments h1')
//removes the class and add class you want
$heading.removeClass($activeSize.data('newClass'));
$heading.addClass($(this).data('newClass'));
//add active to the clicked one
$(this).addClass("active")
});
JS Fiddle

Maintain the class which alters the font size in the list item as a data attribute and add the new class to the target on click event!
Here is the working solution..
var $item = $('.list-inline-item'),
$target = $('.img-responsive.img-thumbnail');
$item.on('click', function() {
var size = $(this).find('a').data('size');
$target
.removeClass('w-50-p w-75-p w-100-p') // remove size classes
.addClass(size);
});
.w-50-p {
font-size: 1em;
}
.w-75-p {
font-size: 1.5em;
}
.w-100-p {
font-size: 2em;
}
.list-inline-item a {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-12">
<div class="layout-attachments">
<ul class="list-inline layout-components">
<li class="list-inline-item"><a data-size="w-50-p">S</a></li>
<li class="list-inline-item"><a data-size="w-75-p">M</a></li>
<li class="list-inline-item"><a data-size="w-100-p">L</a></li>
</ul>
<h1 class="img-responsive img-thumbnail w-75-p">Change the class of this element</h1>
</div>