We Keep Coding

Creating multiple Modals for many different pictures

I have a modal that contains many different items(Menu items). I want to make it so when I click the heading of any specific menu item, another modal pops-up showing the image of said dish. The only issue I run into, is that I would have to create a ton of different modals for each item dish(15 of them). IS there a way I can create a function/loop fthem so they only access a soecific image attatched to said item? Should I create a seperate container for the images? Or add them to the item containers themselves and set the display to none?
Here is an example without much css or the JS with it? Any thoughts of the best way to tackle this?
/*This is the background/ not the box itself*/
.menu {
display: block;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: none;
background-color: rgba(0, 0, 0, .4);
}
/*Menu Content Box*/
.menuContent {
background-color: #f1e3cb;
margin: 5% auto;
border: 1px solid #888;
width: 50%;
height: 80%;
border-radius: 5px;
font-family:'IM Fell French Canon SC', serif;
font-weight: 600;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: #f1e3cb;
}
&::-webkit-scrollbar-thumb {
background: #888;
}
.menuHeader {
text-align: center;
}
.menu-items {
display: flex;
flex-direction: row;
justify-content: space-evenly;
text-align: center;
margin: 20px 0 0;
> div {
width: 33%;
margin: 0 5px;
}
p{
text-align: left;
&:hover {
cursor: pointer;
transform: scale(1.1);
transform-origin: left;
}
}
.item {
margin-top: 20px;
align-self: center;
}
}
}
/*Close button*/
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
padding-right: 10px;
overflow: auto;
&:hover,
&:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
}
<!--Menu Modal-->
<div id="myMenu" class="menu">
<!--Menu Content-->
<div class="menuContent">
<span class="close">×</span>
<div class="menuHeader">
<h1>Menu</h1>
</div>
<div class="menu-items">
<div class="Appetizers">
<h2>Appetizers</h2>
<div class="item">
<p>Sardine canapés:</p>
<small>Roasted sardines, boiled egg yolk, whole olives, and a choice of cheese stacked
on our signature house bread.
</small>
</div>
<div class="item">
<p>Crab Stuffed with Crayfish:</p>
<small>Fried crab and vegetables stuffed into large crayfish.</small>
</div>
<div class="item">
<p>Shrimp Canapés:</p>
<small>Lemon fried shrimp, cucumber slicies atop house bread served with a side of
our shrimp sauce.
</small>
</div>
<div class="item">
<p>Préfou:</p>
<small>House baguette stuffed with garlic butter and parsely.</small>
</div>
<div class="item">
<p>Moules farcies:</p>
<small>baked mussels stuffed with garlic butter, parsley, shallots and nutmeg. Topped with
parmesan cheese and breadcrumbs .
</small>
</div>
</div>
<div class="Entrees">
<h2>Entrees</h2>
<div class="item">
<p>Lamb chops & Cognac dijon:</p>
<small>Juicy lamb elegantly served with our signature Dijon sauce</small>
</div>
<div class="item">
<p>Chicken Cordon Bleu:</p>
<small>Chicken stuffed with ham and cheese sauce, served atop a bed of roasted lettuce.</small>
</div>
<div class="item">
<p>Coq au vin:</p>
<small>Chicken drums braised with wine, mushrooms, pork and garlic butter. Topped with
green onion and chili, and a side of roasted scallops.
</small>
</div>
<div class="item">
<p> Ratatouille:</p>
<small>Award winning dish. Shallow fried vegetables layered in our signature baked casserole.
</small>
</div>
<div class="item">
<p>Roast Chicken:</p>
<small>Cuts of chicken roasted in garlic butter and an herby crust served with roasted baby spinach.</small>
</div>
<div class="item">
<p>Duck a l'orange:</p>
<small>Duck legs and breast served with fresh orange sauce.</small>
</div>
<div class="item">
<p>Croque-Monsieur:</p>
<small>Baked ham and cheese with velvety bechamel. Served with egg upon request.</small>
</div>
</div>
<div class="Desserts">
<h2>Desserts</h2>
<div class="item">
<p>Apricot and Almond Galette:</p>
<small>Fruity galettes stuffed with an almond cream.</small>
</div>
<div class="item">
<p>Honey Hazelnut Financiers:</p>
<small>Buttery brown cakes tops with a berry-hazelnut topping.</small>
</div>
<div class="item">
<p>Caramelized-Honey Brulee:</p>
<small>House Brulee coated with a caramelized layer of torched honey.</small>
</div>
</div>
</div>
</div>

You don't need a separate modal for each image. You just need a one modal that will display different images.
Using javascript, you need to add a click event listener to the container of all the items. When any items is clicked, get the src attribute of the img element associated with that item and set this src attribute as the src attribute of the img in the modal.
Here's a demo in which i have 3 images which are displayed in a modal one at a time depending on which image label you clicked on.
const modal = document.getElementById('modal');
const modalContainer = document.querySelector('.modal-container');
const container = document.getElementById('container');
container.addEventListener('click', (event) => {
if (event.target.matches('span')) {
const src = event.target.nextElementSibling.getAttribute('src');
modal.children[0].setAttribute('src', src);
modalContainer.classList.add('showModal');
}
});
modalContainer.addEventListener('click', () => {
modalContainer.classList.remove('showModal');
})
body { margin: 0; }
img { display: none; }
div span {
display: inline-block;
margin: 5px;
font-size: 1.2rem;
cursor: pointer;
text-decoration: underline;
color: blue;
}
.modal-container {
display: none;
position: fixed;
background: #222;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.8);
}
.modal-container img { display: inline-block; }
.showModal { display: flex; }
<div class="modal-container">
<div id="modal">
<img src="" />
</div>
</div>
<div id="container">
<div>
<span>Show Image 1</span>
<img src="https://picsum.photos/id/1/200/" />
</div>
<div>
<span>Show image 2</span>
<img src="https://picsum.photos/id/20/200/" />
</div>
<div>
<span>Show image 3</span>
<img src="https://picsum.photos/id/30/200/" />
</div>
</div>

How to highlight and detect mouse clicks on a css grid row?

I'm trying to create a menu which I'm laying out using CSS grid. The problem that I'm having is figuring out how I can make the menu interactive when the mouse is hovering over each menu item.
I would like to be able to highlight the entire row when the mouse is over any of the menu items in the row. I can highlight each individual grid cell by adding a :hover css rule, but I don't know how to highlight the entire grid row.
The second part is then detecting when a row is being clicked. Again, I can add an onClick event handler to each cell but that doesn't seem ideal, as users could accidentally click in the gap between grid cells. I was thinking that if I can figure out how to highlight the entire row, then i could add the click handler to this row highlighter and that would solve the gap click problem.
I have created a codepen example that demonstrates how the menu is currently constructed: https://codepen.io/marekKnows_com/pen/RqMgGw
HTML:
<div class="myGrid">
<div class="anchor" id="item1">
<i class="image material-icons">folder_open</i>
</div>
<span class="text">Open...</span>
<span class="shortcut">Ctrl+O</span>
<div class="anchor" id="item2">
<i class="image material-icons">save</i>
</div>
<span class="text">Save...</span>
<span class="shortcut">Ctrl+S</span>
<div class="anchor" id="item3"></div>
<span class="text">Action</span>
<div class="separator"></div>
<div class="anchor" id="item4"></div>
<span class="text">Exit</span>
<span class="shortcut">Ctrl+X</span>
</div>
CSS:
.myGrid {
border: 1px solid black;
display: grid;
grid-template-columns: 20px auto auto;
grid-gap: 2px 6px;
align-items: center;
justify-items: start;
padding: 10px;
box-sizing: border-box;
}
.image {
width: 24px;
}
.text {
height: 28px;
line-height: 28px
}
.shortcut {
justify-self: end;
padding: 0 5px;
height: 28px;
line-height: 28px
}
.separator {
grid-column: 1 / span 3;
width: 100%;
height: 3px;
border-bottom: 1px solid lightgray;
}

One option is to wrap the row elements with a div, include style display: contents; in the wrapper div, add the click handler to the wrapper div.
CSS grid will treat the elements inside the wrapper as if there was no wrapper when laying out the contents, so they will be aligned as you desire. See MDN display-box for more info. That link also points out browsers have accessibility bugs with display: contents;.
I have tested only with Firefox so far.
<div class="myGrid">
<div class="row" onclick="console.log('click');">
<div class="anchor" id="item1">
<i class="image material-icons">folder_open</i>
</div>
<span class="text">Open...</span>
<span class="shortcut">Ctrl+O</span>
</div>
<div class="row" onclick="console.log('click');">
<div class="anchor" id="item2">
<i class="image material-icons">save</i>
</div>
<span class="text">Save...</span>
<span class="shortcut">Ctrl+S</span>
</div>
<div class="row" onclick="console.log('click');">
<div class="anchor" id="item3"></div>
<span class="text">Action</span>
</div>
<div class="separator"></div>
<div class="row" onclick="console.log('click');">
<div class="anchor" id="item4"></div>
<span class="text">Exit</span>
<span class="shortcut">Ctrl+X</span>
</div>
</div>
.myGrid {
border: 1px solid black;
display: grid;
grid-template-columns: 20px auto auto;
grid-gap: 2px 6px;
align-items: center;
justify-items: start;
padding: 10px;
box-sizing: border-box;
}
.row {
display: contents;
}
.image {
width: 24px;
}
.text {
height: 28px;
line-height: 28px
}
.shortcut {
justify-self: end;
padding: 0 5px;
height: 28px;
line-height: 28px
}
.separator {
grid-column: 1 / span 3;
width: 100%;
height: 3px;
border-bottom: 1px solid lightgray;
}

I finally got it to work. What I ended up doing was making the anchor element have position relative. Then I added a new div with position absolute under the anchor element. From within JavaScript I can size the new element to be the full width of the grid and using z-index I can position it relative to the other elements in the row accordingly.

Firstly, you might want to change your html so the .anchor elements are wrapping each item.
<div class="myGrid">
<div class="anchor" id="item1">
<i class="image material-icons">folder_open</i>
<span class="text">Open...</span>
<span class="shortcut">Ctrl+O</span>
</div>
<div class="anchor" id="item2">
<i class="image material-icons">save</i>
<span class="text">Save...</span>
<span class="shortcut">Ctrl+S</span>
</div>
<div class="anchor" id="item3">
<span class="text">Action</span>
</div>
<div class="separator"></div>
<div class="anchor" id="item4">
<span class="text">Exit</span>
<span class="shortcut">Ctrl+X</span>
</div>
</div>
And then use flex to align the contents of each item
.myGrid {
border: 1px solid black;
padding: 10px;
box-sizing: border-box;
}
.anchor {
display: flex;
justify-content: flex-start;
}
/* Hover for each anchor */
.anchor:hover {
background: red;
}
.image {
width: 24px;
}
.text {
height: 28px;
line-height: 28px
}
.shortcut {
margin-left: auto; /* push the shortcut to the right */
padding: 0 5px;
height: 28px;
line-height: 28px
}
.separator {
grid-column: 1 / span 3;
width: 100%;
height: 3px;
border-bottom: 1px solid lightgray;
}
https://codepen.io/anon/pen/xQWLaE

.anchor:hover >
.mygrid
{ background:red }
check this if it works on hovering item1 it will change the border color(from black to red as highlighting)

Make two textareas side by side sharing a flexible border

I want to make two textareas side by side, which share a same border. Then we could drag the border and change their width, while keeping the sum of their widths constant. In other words, it is like the panels inside JSBin.
Does anyone know how to realise this?
PS: here is the code to make two stationary textareas side by side:
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
</head>
<body>
<textarea name="t1"></textarea>
<textarea name="t2"></textarea>
</body>
</html>
Edit 1: the following code is from index.html of JSBin. But I don't see how it manages to realise the sharing border:
<div id="panelswaiting">
<div class="code stretch html panel">
<div role="menubar" class="label menu" tabindex="0"><span class="name"><strong>Processor</strong></span><div class="dropdown" id="htmlprocessors">
<div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="html">
<a role="menuitemradio" aria-checked="true" href="#html" data-label="HTML">HTML</a>
<a role="menuitemradio" href="#markdown">Markdown</a>
<a role="menuitemradio" href="#jade">Jade</a>
Convert to HTML
</div>
</div>
</div>
<div class="editbox">
<textarea aria-label="HTML Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="html"></textarea>
</div>
</div>
<div class="code stretch javascript panel">
<div role="menubar" class="label menu" tabindex="0"><span class="name"><strong><a role="menuitem" class="fake-dropdown button-dropdown" href="#javascriptprocessors">Processor</a></strong></span>
<div class="dropdown" id="javascriptprocessors">
<div role="menu" aria-hidden="true" class="dropdownmenu processorSelector" data-type="javascript">
<a role="menuitemradio" aria-checked="true" href="#javascript" data-label="JavaScript">JavaScript</a>
<a role="menuitemradio" href="#babel">ES6 / Babel</a>
<a role="menuitemradio" href="#jsx">JSX (React)</a>
<a role="menuitemradio" href="#coffeescript">CoffeeScript</a>
<a role="menuitemradio" href="#traceur">Traceur</a>
<a role="menuitemradio" href="#typescript">TypeScript</a>
<a role="menuitemradio" href="#processing">Processing</a>
<a role="menuitemradio" href="#livescript">LiveScript</a>
<a role="menuitemradio" href="#clojurescript">ClojureScript</a>
<a role="menuitem" href="#convert">Convert to JavaScript</a>
</div>
</div>
</div>
<div class="editbox">
<textarea aria-label="JavaScript Code Panel" spellcheck="false" autocapitalize="none" autocorrect="off" id="javascript"></textarea>
</div>
</div>
...
</div>
Edit 2:
Following the answer of Ankit vadariya, I have made a minimum case... There is only one thing left: how to ensure the min-width of .panel-right? It does not seem to work at the moment...
One way is to set max-width of .panel-left, but if we look at JSBin, there is no limit of max-width for each panel, whereas there is min-width...

Here is the your solution
Hope it will work for you.
Code
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
$(".panel-top").resizable({
handleSelector: ".splitter-horizontal",
resizeWidth: false
});
CSS
html,
body {
height: 100%;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.page-container {
margin: 20px;
}
/* horizontal panel*/
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
/* avoid browser level touch actions */
xtouch-action: none;
}
.panel-left {
flex: 0 0 auto;
/* only manually resize */
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 150px;
white-space: nowrap;
background: #838383;
color: white;
}
.splitter {
flex: 0 0 auto;
width: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
min-height: 200px;
cursor: col-resize;
}
.panel-right {
flex: 1 1 auto;
/* resizable */
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px;
background: #eee;
}
/* vertical panel */
.panel-container-vertical {
display: flex;
flex-direction: column;
height: 500px;
border: 1px solid silver;
overflow: hidden;
}
.panel-top {
flex: 0 0 auto;
/* only manually resize */
padding: 10px;
height: 150px;
width: 100%;
white-space: nowrap;
background: #838383;
color: white;
}
.splitter-horizontal {
flex: 0 0 auto;
height: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353;
cursor: row-resize;
}
.panel-bottom {
flex: 1 1 auto;
/* resizable */
padding: 10px;
min-height: 200px;
background: #eee;
}
label {
font-size: 1.2em;
display: block;
font-weight: bold;
margin: 30px 0 10px;
}
pre {
margin: 20px;
padding: 10px;
background: #eee;
border: 1px solid silver;
border-radius: 4px;
overflow: auto;
}
HTML
<html>
<head>
<title>Simple Split Panels - jquery-resizable</title>
<meta charset="utf-8"/>
</head>
<body style="">
<div class="page-container">
<h1>
jquery-resizable - A simple splitter panel
</h1>
<hr />
<p>
Simple example that demonstrates how to create slidable two-pane layouts using FlexBox and the resizable plug-in.
Note that Flexbox is not required, but used here to keep the layout simple.
</p>
<label>Horizontal Splitter Panes:</label>
<div class="panel-container">
<div class="panel-left">
left panel
</div>
<div class="splitter">
</div>
<div class="panel-right">
right panel
</div>
</div>
<label>Vertical Splitter Panes:</label>
<div class="panel-container-vertical">
<div class="panel-top">
top panel
</div>
<div class="splitter-horizontal">
</div>
<div class="panel-bottom">
bottom panel
</div>
</div>
<hr />
<p>
This example creates two resizables for the horizontal and vertical splitter panes:
</p>
<pre>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../src/jquery-resizable.js"></script>
<script>
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
$(".panel-top").resizable({
handleSelector: ".splitter-horizontal",
resizeWidth: false
});
</script>
</pre>
</div>
</body>
</html>

The only way I can see to do this is using something like JavaScript and analyzing in real-time the width of one to get the other to add to 100%.

How to hide various span tags with a known id leaving just one visible

I have this page where I have some span tags that works like a link, inside it I have some hidden divs, what I want to do is when I click in one of these links the div inside of the clicked one is shown and the other spans receive the property display:none.
Like this:
<style>
#divHidden{display:none;}
</style>
<span id="link_01" onclick="myfunction()"> <!--<<= when clicked-->
<div id="divHidden">Content</div> <!--<<= this comes visible-->
</span>
<span id="link_02" onclick="myfunction()"> <!--<<= then this-->
<div id="divHidden">Content</div>
</span>
<span id="link_03" onclick="myfunction()"> <!--<<= and this goes hidden-->
<div id="divHidden">Content</div>
</span>
how do I code this in javascript?

Something like this?
UPDATE: to work as request, hope this is ok
codepen version
$('.content-wrapper').on('click','.tag', function(evt){
evt.preventDefault();
var selectedDiv = $(this).prop('id');
$('.content-wrapper span:not(#' + selectedDiv + ')').hide();
$(this).find('.content').addClass('show');
})
span.tag .content {
padding-top: 10px;
text-align: center;
display: none;
}
span.tag .content.show {
display: block;
}
span.tag {
margin: 0 auto;
padding: 6px 0;
border-bottom: 1px #ddd solid;
width: 200px;
cursor: pointer;
color: #444;
height: 40px;
background: #eee;
transition: background 600ms;
display: block;
}
span.tag:hover {
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-wrapper">
<span class="tag" id="tag-one">
<div class="content">Content A</div>
</span>
<span class="tag" id="tag-two">
<div class="content">Content B</div>
</span>
<span class="tag" id="tag-thre">
<div class="content">Content C</div>
</span>
</div>

Dynamic popup menu that adds class to parent when radio button is selected (like Trello's)

I want to create a dynamic popup menu that adds a class to "lists" parent when radio button is selected // removes classes when unselected (HTML structure below cannot change...only can change CSS and JS)
I'm trying to make the "List Popup" popup directly under each "Green Gear" icon when clicked on/ hidden when clicked off (css classes).
Whenever a radio button is selected from the popup, I need it to add a class directly into the corresponding list's parent div, while not effecting any of the other lists.
The trick (for me) is making all of this happen dynamically with 1 popup menu that sits outside of each lists divs scope.
The HTML structure cannot be changed (this has to be completely done w/ JS and CSS).
Here's what I've got so far: https://jsfiddle.net/oneeezy/t5eou67k/
$(document).ready(function () {
/* Code to play with for show/hide popup
/* Code to play with for adding/removing classes when radio checked
$('.list-layouts input').click(function () {
$('.list-layouts input:not(:checked)').parent().removeClass("blue");
$('.list-layouts input:checked').parent().addClass("blue");
});
*/
});
/* Reset Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
h1 { padding: 0 0 .25rem; }
h2 { line-height: 1.6; }
aside { background: #e2e4e6; padding: 1rem; color: gray; margin: 1rem; border: 1px dashed gray; }
aside ul { list-style: inside; }
aside span { font-style: italic; color: rgba(0, 0, 0, .78); }
.page { background: rgba(137, 96, 158, .17); margin: 2rem 0; padding: 2rem; position: relative; }
.page::before { content: "<div> ...Scope"; color: rgba(0, 0, 0, .54); position: absolute; top: 0; left: 0; }
.page::after { content: "</div>"; color: rgba(0, 0, 0, .54); position: absolute; bottom: 0; left: 0; }
.purple { background: rgba(137, 96, 158, .17); }
.green { background: lime; }
.yellow { background: yellow; }
/* Trello (default tyles) */
.wrapper { display: flex; }
.list-wrapper { flex: 1; margin: 10px; }
.list { background: #e2e4e6; position: relative; padding: 0 10px 3px; }
.icon { display: block; position: absolute; top: 0; right: 0; width: 33px; height: 38px; background: lime; text-decoration: none; font-size: 2em; line-height: 1.3; color: darkgreen; }
.card { display: block; height: 50px; background: white; border-radius: 3px; border: 1px solid #ccc; padding: .5em; margin: 0 0 .5em; }
/* List Popup */
.list-popup { display: block; width: 350px; max-height: 800px; background: yellow; border-radius: 3px; border: 1px solid #ccc; padding: 1em; }
.list-popup p { padding: 0 0 1rem; }
.list-popup p span::after { content: "<div class='list-wrapper'>"; }
.list-layouts ul { list-style: none; }
.list-normal { }
.list-normal .list { }
.list-color { }
.list-color .list * { background: skyblue; }
.list-bold { }
.list-bold .list * { font-weight: bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Description -->
<aside>
<h1>Dynamic popup menu that adds class to lists parent when radio button is selected // removes classes when unselected</h1>
<ul>
<li>I'm trying to make the <span class="yellow">"List Popup"</span> popup directly under each <span class="green">"Green Gear"</span> icon when clicked on/ hidden when clicked off (css classes).</li>
<li>Whenever a radio button is selected from the popup, I need it to add a class directly into the corresponding list's parent div, while not effecting any of the other lists.</li>
<li>The trick (for me) is making all of this happen dynamically with 1 popup menu that sits outside of each <span class="purple">lists divs scope</span>.</li>
</ul>
</aside>
<!-- Lists -->
<div class="page">
<div class="wrapper">
<div class="list-wrapper">
<div class="list">
<h2>List (1)</h2>
⚙
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
</div>
</div>
<div class="list-wrapper">
<div class="list">
<h2>List (2)</h2>
⚙
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
</div>
</div>
<div class="list-wrapper">
<div class="list">
<h2>List (3)</h2>
⚙
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
<div class="card">Woohoo! Woohoo! Woohoo! </div>
</div>
</div>
</div>
</div>
<!-- List Layout popup -->
<div class="page">
<div id="listPopup" class="list-popup">
<div>
<h3>List Popup</h3>
<p>These radio buttons should add a special class to the individual <span></span> when clicked on and removed when clicked off!</p>
</div>
<form class="list-layouts">
<ul>
<li>
<input type="radio" name="listLayout" id="listNormal">
<label for="listNormal">Normal</label>
</li>
<li>
<input type="radio" name="listLayout" id="listColor">
<label for="listColor">Bold</label>
</li>
<li>
<input type="radio" name="listLayout" id="listBold">
<label for="listBold">Italic</label>
</li>
</ul>
</form>
</div>
</div>

So first we will add the class to the list wrapper of the lists parent with the following code:
$('.icon').on('click', function () {
if(!$('#listPopup').hasClass("open")){
$('#listPopup').toggleClass("open");
}
$(this).parents('.list-wrapper').siblings().removeClass('blue');
if(!$(this).parents('.list-wrapper').hasClass("blue")){
$(this).parents('.list-wrapper').toggleClass("blue");
}
});
Then we need to create an onchange function for the radios to find this class and add the new class to that list.
$('.list-layouts input').on('change', function () {
var newClass = $(this).attr("id");
// Remove the following statement if you want your classes to stack up
$('.blue').removeClass("listNormal listColor listBold");
$('.blue').addClass(newClass);
});
Here is a working fiddle of the whole thing in action Fiddle