We Keep Coding

javascript/jquery - How to take variable of child class name from repeated occurrences of parent class

EDIT (old link to JSFiddle was wrong): Link to JSFiddle example: https://jsfiddle.net/uvexys0a/
I am attempting to program in jQuery so it wraps an HTML link to the staff member's profile page wraps around the entire each div with the class name staffList. The path to the page is stored as a child class in each div, as seen on the JSFiddle.
The code seems to function, somewhat. Both links end up going to John Smith's profile:
<a href="https://example.com/john-smith">
<div class="staffList john-smith">
<p>John Smith</p>
<p>Co-Founder</p>
</div>
</a>
<a href="https://example.com/john-smith">
<div class="staffList jane-smith">
<p>Jane Smith</p>
<p>Co-Founder</p>
</div>
</a>
However, if the code was running properly, it would output like this:
<a href="https://example.com/john-smith">
<div class="staffList john-smith">
<p>John Smith</p>
<p>Co-Founder</p>
</div>
</a>
<a href="https://example.com/jane-smith">
<div class="staffList jane-smith">
<p>Jane Smith</p>
<p>Co-Founder</p>
</div>
</a>
How do you code so the variable staffURL changes with each repeated parent div with parent class staffList and the child class the corresponding staff member's link?

You're basing your links off of the second class name, but in your second staffList, you say John Smith again, so you get john-smith both times for each link. You can change that to jane-smith and loop over each item to get what you want. Try this:
jQuery(function($){
var staffList = $(".staffList");
$.each(staffList, function(i) {
var staffURL = $(this).attr('class').split(' ')[1];
$(staffList[i]).wrap("<a href='https://example.com/"+staffURL+"/'></a>");
});
});
.staffList {
border: 1px solid #000;
margin: 15px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="warpper">
<div id="staffSection">
<div class="staffList john-smith">
<p>John Smith</p>
<p>Co-Founder</p>
</div>
<div class="staffList jane-smith">
<p>Jane Smith</p>
<p>Co-Founder</p>
</div>
</div>
</div>
</div>
jsfiddle: https://jsfiddle.net/7nxbu1t5/2/

You'd need to loop through each staffList item in order to set the URL dynamically.
jQuery(function($) {
/**
* Loop through each list item
*/
$('.staffList').each(function() {
var $listItem = $(this);
var staffSlug = $listItem
.attr('class') // Get the value of the class attribute
.replace('staffList', '') // Remove the common class
.trim(); // Clear up any pre/appending white space
// Wrap element in `a` tag
$listItem.wrap('');
});
});
.staffList {
border: 1px solid #000;
margin: 15px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="warpper">
<div id="staffSection">
<div class="staffList john-smith">
<p>John Smith</p>
<p>Co-Founder</p>
</div>
<div class="staffList jane-smith">
<p>Jane Smith</p>
<p>Co-Founder</p>
</div>
</div>
</div>
</div>

Collapsible Panel Width

I would like the bottom panel to expand its width to col-md-12when the top panel is collapsed, and when the user expands the top panel again the width of the bottom panel goes back to col-md-8.
I'm fairly new at this, but this is my code so far:
var panel = document.getElementById("panel");
var panel1 = document.getElementById("panel1");
function secondPanelResize() {
if (panel.style.height <= "45") {
panel1.classList.remove("col-md-8");
panel1.classList.add("col-md-12");
} else {
panel1.classList.remove("col-md-12");
panel1.classList.add("col-md-8");
}
}
<div class="panel-group col-md-12">
<div class="col-md-8" id="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" onclick="secondPanelResize()" id="collapse">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body" id="panelbody">Panel Body</div>
</div>
</div>
</div>
<div class="col-md-8" id="panel1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Collapsible panel</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel-body" id="panelBody">Panel Body</div>
</div>
</div>
</div>
</div>
I've managed to make the bottom panel expand its width when the top panel is closed, but I cannot figure out how to make the width reduce to its original when the top panel is open.

Here's a basic example of adding and removing CSS classes with JS.
function topPanel() {
var topPanelEle = document.getElementById('topPanel')
var bottomPanelEle = document.getElementById('bottomPanel')
if (!topPanelEle.classList.contains('expanded')) { //To aviod multiple clicks
topPanelEle.classList.add('expanded');
}
bottomPanelEle.classList.remove('expanded');
}
function bottomPanel() {
var topPanelEle = document.getElementById('topPanel')
var bottomPanelEle = document.getElementById('bottomPanel')
if (!bottomPanelEle.classList.contains('expanded')) { //To aviod multiple clicks
bottomPanelEle.classList.add('expanded');
}
topPanelEle.classList.remove('expanded');
}
.top-panel {
padding: 16px;
background-color: red;
}
.bottom-panel {
padding: 16px;
background-color: blue;
}
.expanded {
height: 100px;
}
Expand Top Panel
<div id="topPanel" class="top-panel">Top Panel</div>
Expand Top Panel
<div id="bottomPanel" class="bottom-panel">Bottom Panel</div>
Now for in your case I'm not entirely sure because no CSS was given but in your added classes (like expanded in my case) could contain height: 100% !important and override the default CSS that was added (like top-panel or bottom-panel in my case) which could be something like height: 50%. I also find it easier using 2 functions or having 1 with a parameter so I know whether it's the top or bottom panel straight from where its being called, unless you have 1 button as a toggle.

toggle class on parent div on click (or ng-click)

I have some collapseable panels and i want to add a resize button. For this i've made this javascript code:
function myFunction () {
$(".elementoGrafico").click(function () {
$(this).toggleClass("col-md-12");
$(this).toggleClass("col-md-6");
});
};
the html code is:
<div class="col-md-12 ui-state-default elementoGrafico">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading ">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" class="component-button max-min-button more-less glyphicon glyphicon-chevron-up"></a>
Gráfico 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in elemento"> <canvas class="chart" id="myChart"></canvas>
</div>
</div>
</div>
</div>
But it doesn't work properly. Sometimes i have to click more than one time and some times the chart inside don't resizes like the div. (i want a code that works for all elements, not just one, so i want to do it using class, not id.)
I could use angularjs too.
Thank you.

Use this:
$(".elementoGrafico").each(function() {
let panel = this;
$(this).find(".resize-button").click(function() {
$(panel).toggleClass("col-md-12");
$(panel).toggleClass("col-md-6");
});
});
What this does is find the resize button for each panel and assign it a click handler which changes the panel itself.

add and remove class on resize button click

I have some collapseable panels and i want to add a resize button. For this i've made this javascript code:
function myFunction () {
$(".elementoGrafico").click(function () {
$(this).toggleClass("col-md-12");
$(this).toggleClass("col-md-6");
});
};
the html code is:
<div class="col-md-12 ui-state-default elementoGrafico">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading ">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" class="component-button max-min-button more-less glyphicon glyphicon-chevron-up"></a>
Gráfico 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in elemento"> <canvas class="chart" id="myChart"></canvas>
</div>
</div>
</div>
</div>
But it doesn't work. How can make it work? (i want a code that works for all elements, not just one, so i want to do it using class, not id.)
Thank you.

"elemnto1" is not how you grab each class, you're missing the period
$(".elemento1").each()
edit:
$(".elemento1").click(function() {
$(this).toggle("col-md-12");
$(this).toggle("col-md-6");
});

function myFunction () {
$( "elemento1" ).each(function() {
$(this).toggleClass("col-md-12");
$(this).toggleClass("col-md-6");
});
};

javascript toggle showing and hiding several div elements

I have two divs on a page (id's MAY and JUNE) and two buttons on the page. The page startes off by showing the May div, with the June div hidden using css display: none
I am trying to create the correct javascript that will toggle between the two of them, but (after searching on here) I can only manage to get one to work.
Codepen showing issue is https://codepen.io/billteale/pen/zwBBez
<a href="#" id="button" >MAY</a>
<a href="#" id="button" >JUNE</a>
<!-- first div, shows on page load -->
<div id="MAY">
<div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
<!-- second div, hidden originally -->
<div class="hidden" id="JUNE">
<div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
...and the current js is
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('MAY');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
Eventually I will have four or more divs to toggle between, with each button showing its relevant div, and hiding the others.
Can anybody tell me how to add to the code I have here to make this work for multiple elements?

It can be done by setting the div id's in the anchor tag's href attribute, and showing the corresponding div while hiding the rest. It can be done for any number of div's with no extra script, Just add the new div id to the new anchor tags href. You should give a common class to all the div's like month to select them all.
$("a.btn").click(function() {
var id = $(this).attr("href");
$("div.month:visible").hide();
$(id).show();
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
MAY
JUNE
<!-- first div, shows on page load -->
<div id="MAY" class="month">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="month hidden" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>

First you add a "div-toggle" class to each one of the divs you want to toggle. After that, you bind click events on your buttons, firing a function which takes an identifier as argument.
The function will run through your divs and set the one that has the argument id as visible, and hide the others.
This way you can add more divs to be toggled. You just have to mark them with the "div-toggle" class, set their id's and create their respective buttons.
var divs = document.getElementsByClassName('div-toggle');
function toggle(id) {
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.id == id)
div.style.display = 'block';
else
div.style.display = 'none';
}
}
<a href="#" onclick="toggle('MAY')" >MAY</a>
<a href="#" onclick="toggle('JUNE')" >JUNE</a>
<!-- first div, shows on page load -->
<div class="div-toggle" style="display:block;" id="MAY">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="div-toggle" style="display:none;" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>

div.style.visibility = "hidden"
this will completely hide your div. I'm pretty sure this is what you are asking for
also instead of that you can make a separate function and add o'clock to div
<div onclick="nameoffunction()"></div>
the function can take in a parameter and each div on click function can have the parameter of its id

Your div were messed up! The snippet is working now with the help of jQuery.
$("#JUNE").hide();
$("#MAY").show();
$('#button-may').on("click", function() {
$("#JUNE").hide();
$("#MAY").show();
});
$('#button-june').on("click", function() {
$("#JUNE").show();
$("#MAY").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
MAY
JUNE
<!-- first div, shows on page load -->
<div id="MAY">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="hidden" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>