I'm trying to get multiple tabs on the same page working without having to change my markup or style.
The problem is that clicking the tab links in one section removes the content from the other sections
I see other questions with the same issue but I can't modify my HTML or CSS
// Change tab class and display content
$('.tabs-nav a').on('click', function (event) {
event.preventDefault();
$('.tab-active').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.tabs-stage .tab-content').hide();
$($(this).attr('href')).show();
});
$('.tabs-nav a:first').trigger('click'); // Default
JS Fiddle
There's a couple of issues with the logic.
You need to add the .current class to the targeted tab, not manually call show() on it, as the latter will apply an inline style which will not be overriden by removing the .current class.
Use li:nth-child(1) a instead of a:first to get the first a element in each container, not the first in the entire page.
You need to remove the .tab-active class from the li, not the a.
Your CSS needs to include the rules to hide/show the tab content in .tab-content and .tab-content.current.
With those issues addressed, the code works:
$('.tabs-nav a').on('click', e => {
e.preventDefault();
let $tabLink = $(e.target);
let $div_container = $tabLink.closest('.wrap');
$div_container.find('li').removeClass('tab-active');
$div_container.find('.tab-content').removeClass('current');
let targetSelector = $tabLink.attr('href');
$tabLink.parent().addClass('tab-active');
$(targetSelector).addClass('current');
});
$('.tabs-nav li:nth-child(1) a').trigger('click');
.tabs-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tabs-nav a {
border-bottom: 5px #a6a6a6 solid;
color: #a6a6a6;
display: block;
font-size: 18px;
font-weight: 600;
padding: 10px 40px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.tabs-nav .tab-active a {
border-bottom-color: #000;
color: var(--body-color);
cursor: default;
z-index: 1;
}
.tabs-nav li {
float: left;
}
.tabs-stage {
background-color: #fff;
border-radius: 0 0 6px 6px;
border-top: 5px #a6a6a6 solid;
clear: both;
/* margin-bottom: 20px; */ /* removed for this demo to save space */
padding: 10px 20px 20px;
position: relative;
top: -5px;
width: 100%;
}
.tab-content {
display: none;
}
.tab-content.current {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<section class="wrap">
<ul class="tabs-nav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tabs-stage">
<div id="tab11" class="tab-content">
<h3>Tab 1 Content</h3>
</div>
<div id="tab12" class="tab-content">
<h3>Tab 2 Content</h3>
</div>
</div>
</section>
<section class="wrap">
<ul class="tabs-nav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tabs-stage">
<div id="tab21" class="tab-content">
<h3>Tab 1 Content</h3>
</div>
<div id="tab22" class="tab-content">
<h3>Tab 2 Content</h3>
</div>
</div>
</section>
Related
I'm customizing a Shopify store using Archetype Themes Motion v8.0.2. I have found a code to add tabs to my product pages. I've added media queries to my theme.css to display the tabs as an accordion at certain breakpoints. I would like to add code to close the accordion on click. I'm okay with HTML/CSS, but don't know any JS. I found the script online. Any help would be appreciated!
$(document).ready(function(){
$('ul.shopify-tabs > li').click(function(){
var tab_id = $(this).attr('data-tab');
$(this).parent().find('li').removeClass('current');
$('.shopify-tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
});
})
.section-tab-head {
background: #efefef;
color: #333;
display: block;
padding: 10px 10px;
cursor: pointer;
margin: 2px;
}
#media only screen and (min-width: 481px) and (max-width: 768px),
(min-width: 1051px) {
.section-tab-head {
background: none;
display: inline-block;
margin: inherit;
margin-top: 0;
}
}
.section-tab-head.current {
background: #dbdbdb;
color: #333;
}
.shopify-tab-content {
display: none;
background: none;
padding: 15px;
width: 100%;
}
.shopify-tab-content > p {
font-size: 10pt;
font-weight: 400;
}
.shopify-tab-content.current {
display: block;
font-size: 10pt;
background: white;
margin-top: 0px;
}
.shopify-tab-content > ul {
list-style: disc;
}
.shopify-tab-content > ul ul {
list-style: circle;
}
li,
.shopify-tab-content {
margin: 10px 0;
}
.shopify-tabs .shopify-tab-content {
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="shopify-tabs">
<li class="section-tab-head current" data-tab="section-tab-1"> Heading 1</li>
<div id="section-tab-1" class="shopify-tab-content current">
<p>some content goes here</p>
</div>
<li class="section-tab-head" data-tab="section-tab-2"> Heading 2</li>
<div id="section-tab-2" class="shopify-tab-content">
<p>more content in this tab</p>
</div>
<li class="section-tab-head" data-tab="section-tab-3"> Heading 3</li>
<div id="section-tab-3" class="shopify-tab-content">
<p>some content is in list form:</p>
<ul>
<li>product feature</li>
<li>product feature</li>
<li>product feature</li>
</ul>
</div>
</ul>
Add close button to each tab and add jquery code.
$('ul.shopify-tabs > li .close').click(function(){
$(this).parent().removeClass('current');
});
Edit: I added the windo scroll function I make it but the contents under tabs goes over from it. How can I fix that?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
console.log(true);
$(".tabs").addClass("tabs-position");
} else {
console.log(false);
$(".tabs").removeClass("tabs-position");
}
});
.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
}
I have a page with a navbar and tabs. When I click them I direct the user to the section in the same page using the id attribute, however my tabs are in the middle of my page which is fine. What I am trying to achieve is to move them under my navbar section when I click them.
I tried after attribute but I don't get it. I have included my code below, How can I replace their position?
<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="tab-outer">
<div class="tab-list">
<ul>
<li>
Rooms
</li>
<li>
info tab
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
.tabs {
margin-bottom: 50px;
.tab-outer {
border-bottom: 4px solid #f5f5f5;
position: sticky;
top: 70px;
padding: 20px 0 0 0;
}
.tab-list {
a {
color: #4a4947;
}
ul {
padding: 0 30px;
display: flex;
justify-content: space-between;
list-style-type: none;
}
}
}
You cannot nest CSS like that. Instead, use to select siblings at any level. And also, you have to put position:sticky on the direct sibling of an element that is being scrolled.
.tabs {
margin-bottom: 50px;
position: sticky;
top: 0;
background-color: #ffffff;
}
.tabs .tab-outer {
border-bottom: 4px solid #f5f5f5;
top: 70px;
padding: 20px 0 0 0;
}
.tabs .tab-list a {
color: #4a4947;
}
.tabs .tab-list ul {
padding: 0 30px;
display: flex;
justify-content: space-between;
list-style-type: none;
}
<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="tab-outer">
<div class="tab-list">
<ul>
<li>
Rooms
</li>
<li>
info tab
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<div style="height:3600px;width:100%;background-color:blue;color:white;">foo</div>
By using z-index I fixed the problem
.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
z-index: 1;
}
Here is my fiddle: http://jsfiddle.net/2tBGE/209/
I just want to open a div with animation after a user clicked on a menu item.
For example, when clicking on the second item, clicked item and previous item should push to the top of the page and below item should push to the bottom of the page.
jQuery(document).ready(function($) {
$('ul li a').on('click', function(){
$(this).parent().next().css({
'display':'block'
})
})
});
ul{
list-style: none;
background: #eee;
padding: 0;
margin: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.js_item{
display:none;
}
li a{
position: relative;
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover{
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>main menu1</li>
<div class="load_content_for_menu_1 js_item">1</div>
<li>main menu2</li>
<div class="load_content_for_menu_2 js_item">2</div>
<li>main menu3</li>
<div class="load_content_for_menu_3 js_item">3</div>
<li>main menu4</li>
<div class="load_content_for_menu_4 js_item">4</div>
<li>main menu5</li>
<div class="load_content_for_menu_5 js_item">5</div>
</ul>
Note: I've made a small edit to your html structure so that each .toggled_content <div> is the child of each <li>.
With the following jQuery methods you can achieve this.
slideToggle()
Display or hide the matched elements with a sliding motion.
toggleClass()
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
find()
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
var allContent = $("li");
allContent.find(".toggled_content").hide();
$(".toggler").on("click", function() {
var $thisParent = $(this).parent();
if (!$thisParent.hasClass('open')) {
$thisParent
.parent()
.find(".open")
.toggleClass("open")
.find(".toggled_content")
.slideToggle();
}
$thisParent
.toggleClass("open")
.find(".toggled_content")
.slideToggle();
});
ul {
list-style: none;
background: #eee;
padding: 0;
margin: 0;
}
li a {
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover {
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>
main menu1
<div class="toggled_content">1</div>
</li>
<li>
main menu2
<div class="toggled_content">2</div>
</li>
<li>
main menu3
<div class="toggled_content">3</div>
</li>
<li>
main menu4
<div class="toggled_content">4</div>
</li>
<li>
main menu5
<div class="toggled_content">5</div>
</li>
</ul>
Edit:
Or just use the jquery-ui accordion widget.
$("#accordion").accordion({
heightStyle: "fill",
active: 3
});
$("#accordion").on("accordionactivate", function(event, ui) {
const offset = ui.newHeader[0].offsetTop;
$([document.documentElement, document.body]).animate({
scrollTop: offset
}, 200);
});
body {
margin: 0;
}
.ui-accordion {
height: 200vh; /* simulate height with content */
background: #eee;
}
.ui-accordion-header {
margin: 0;
padding: 10px 15px;
font-weight: normal;
}
.ui-accordion-header:hover {
background: #9c0;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div id="accordion">
<h3>main menu 1</h3>
<div>1</div>
<h3>main menu 2</h3>
<div>2</div>
<h3>main menu 3</h3>
<div>3</div>
<h3>main menu 4</h3>
<div>4</div>
</div>
This might be a little more complex than it appears, because you probably do not want any of the DIVs to be made full-screen. Rather, you want the headings of all the DIVs to remain visible, and the contents of any one content div to fill all remaining vertical space.
jQueryUI does this for you, using their accordion tabs widget. You can either include jQueryUI in your project and use their functionality, or you can examine their code and see how they did it, then modify their code to work in your own project.
To incorporate jQueryUI is simple: just add it the same way you would add jQuery, right after the call to jQuery (that is, you also need jQuery for jQueryUI to work, and the link to jQueryUI must follow the link for jQuery) See this link for a code example.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
Instead of adding .css() I have added .show(). It basically does the same by adding display:block
Try adding blow
jQuery(document).ready(function($) {
$('ul li a').on('click', function() {
$('.js_item').hide('slow')
$(this).parent().next().show('slow')
})
});
ul {
list-style: none;
background: #eee;
padding: 0;
margin: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.js_item {
display: none;
}
li a {
position: relative;
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover {
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="main">
<li>main menu1</li>
<div class="load_content_for_menu_1 js_item">1</div>
<li>main menu2</li>
<div class="load_content_for_menu_2 js_item">2</div>
<li>main menu3</li>
<div class="load_content_for_menu_3 js_item">3</div>
<li>main menu4</li>
<div class="load_content_for_menu_4 js_item">4</div>
<li>main menu5</li>
<div class="load_content_for_menu_5 js_item">5</div>
</ul>
Hope this helps!
i am having the following Problem.
I implemented a nested accordion Menu JQuery script on my Website.
What i need to do now is that the accordion Menu sub categories expand based on an URL.
Here is the fiddle https://jsfiddle.net/w6fa87ov/
You will find that i set the Menu item "Test_2" within "Sub Category 1.2" on active.
When the user enters the corresponding URL i.e. "/myurl/Test_2" then the Accordion Menu should open the item "Sub Category 1.2" by default.
Iam not a JQuery programmer and i dont know how to do this in JQuery.
My noob consideration was something like:
- If i find an active element within the menu i "click" the corresponding element which should expand it
Thanks in advance, best regards Burnie
HTML:
<div id="main">
<div id="nestedAccordion">
<h5 id="id_element_TopKat_Food">First Top Category</h5>
<div id="container2">
<h6 id="id_element_Sub1Kat">Sub Category 1.1</h6>
<div id="container3">
<a class="accordionSubKategorie" href="/myurl/Test_0" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_0</h7>
</a>
</div>
<h6 id="id_element_Sub1Kat">Sub Category 1.2</h6>
<div id="container3">
<a class="accordionSubKategorie" href="/myurl/Test_1" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_1</h7>
</a>
<a class="accordionSubKategorie" href="/myurl/Test_2" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat active"> Test_2</h7>
</a>
<a class="accordionSubKategorie" href="/myurl/Test_3" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_4</h7>
</a>
</div>
</div>
<h5 id="id_element_TopKat_Non-Food">Second Top Category</h5>
<div id="container2">
<h6 id="id_element_Sub1Kat">Sub Category 2.1</h6>
<div id="container3">
<a class="accordionSubKategorie" href="/myurl/Test_4" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_4</h7>
</a>
</div>
</div>
</div>
JQuery:
var parentDivs = $('#nestedAccordion div');
var childDivs = $('#nestedAccordion h6').siblings('div');
$('#nestedAccordion h5').click(function() {
parentDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
childDivs.slideUp();
$('#nestedAccordion h6').click(function() {
childDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
CSS:
h5 {
margin-bottom: 8px;
font-weight:bold;
font-size: 20px;
width: 100%;
display: block;
background: #6EB90A;
color: #fefefe;
padding: .75em;
border-radius: 0.15em;
cursor: pointer;
cursor: hand;
}
h5:hover {
background: #5c8a1c;
text-decoration: none;
color: white;
}
h6 {
margin-top:-3px;
font-size: 15px;
width: 100%;
display: block;
background: #FFFFFF;
border-color: #476767;
box-shadow: 0px 0px 0px 2px rgba(71,103,103,1);
color: #476767;
padding: .25em;
border-radius: 0.8em;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
cursor: hand;
}
h6:hover {
background: #476767;
text-decoration: none;
color: white;
}
h7.Sub2Kat {
font-size: 15px;
width: 100%;
display: block;
color: #476767;
padding-top: 2px;
padding-bottom: .1em;
padding-left: 1.8em;
border-radius: 0.2em;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
cursor: hand;
}
h7.Sub2Kat:hover {
background: #6EB90A;
color: white;
}
h7.Sub2Kat.active {
border: 2px solid #ddd;
border-radius: 0.8em;
padding-left: 1.2em;
}
.Sub2Katactive {
font-size:0.9em;
}
h7.Sub2Kat.active {
border: 2px solid #ddd;
border-radius: 0.8em;
padding-left: 1.2em;
}
If this is intended as a menu you could build everything in an unordered list with list elements inside. Any nested menus can be done as such:
<ul class="menu">
<li class="menuItem">
Page 1
<ul class="subMenu">
<li class="menuItem2">Sub Page 1</li>
<li class="menuItem2">Sub Page 2</li>
<li class="menuItem2">Sub Page 3</li>
</ul>
</li>
<li class="menuItem">Page 2</li>
<li class="menuItem">Page 3</li>
</ul>
DOing it this way will allow you to target the :active list item that is built in with browsers. Then you could use css and jquery to make the dropdown magic. In jquery you can target the :active anchor as such:
$('menu > li a:active').doSomething();
If this doesn't interest you, check out this other stack overflow answer that may be of help as well.
Jquery - determining which link was clicked
Cheers
Ok i solved my Prolbem.
Within my Django code which i use to construct the Template i give a specific Class to hasActive or hasPassive which refers to the menu items which has the active or only passive elements inside (elemnts that are not clicked based on the url).
In case someone has the same Problem ill provide more informationen on this.
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