Trying to make an if statement in JS that when one of the top 3 buttons changes, it checks which of the bottom 2 has the "active" class. and visa versa
So when I click 30g it will check if option a or option b is active, and then change the price accordingly.
Any help would be greatly appreciated as I'm kind of a noob.
$(function(){
$('ul.nav li').on('click', function(){
$(this).parent().find('li.activeBtn').removeClass('activeBtn');
$(this).addClass('activeBtn');
});
});
function myFunction(){
const element = document.getElementById("30");
const element2 = document.getElementById("no");
const pricetag = document.getElementById("price");
if(((element.classList.contains("activeBtn")) == true) && ((element2.classList.contains("activeBtn")) == true)){
pricetag.innerHTML = "€1,00";
}
}
ul.nav a {
border: 2px solid #E1E8EE;
border-radius: 6px;
padding: 13px 20px;
font-size: 14px;
color: #5E6977;
background-color: #fff;
cursor: pointer;
transition: all .5s;
display: inline-block;
vertical-align: middle;
}
.activeBtn {
color: grey;
font-weight: 1000;
border: 2px solid grey;
border-radius: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
<li id="30" onclick="myFunction()" class="activeBtn"><a>30g</a></li>
<li id="70" onclick="myFunction()"><a>70g</a></li>
<li id="90" onclick="myFunction()"><a>90g</a></li>
</ul>
<ul class="nav">
<li id="no" class="activeBtn"><a>Zonder kreeftensoep</a></li>
<li id="yes"><a>Met kreeftensoep</a></li>
</ul>
<br>
<div class="product-price">
<span id="price">148$</span>
</div>
Are you trying to update the total price depending on which element is already selected ?
If that's the case, you can use a for loop event binding ->
// You should add a '.nav__el' class to your <li> elements in html
const navEls = document.querySelectorAll('.nav__el')
// Bind an event listener to all your buttons
navEls.forEach(el => {
el.addEventListener('click', () => {
const domPrice = document.querySelector('#price')
// Get the price related to your button
const price = el.getAttribute('data-price')
// Get the current total
const currentPrice = parseInt(domPrice.innerText)
if(el.classList.contains('activeBtn')) {
el.classList.remove('activeBtn')
domPrice.innerText = `${currentPrice - price}$`
}
else {
el.classList.add('activeBtn')
domPrice.innerText = `${currentPrice + price}$`
}
})
})
Related
so im trying to save colour selector to local storage so it will save the users selection after refreshing the page
this is a snippet of my code so far, if i remove the localstorage code from the script it will change colours but wont save the selection.
document.addEventListener('click', (e) => {
const colorOption = e.target.closest('.color-option');
if (!colorOption) return;
// unselect currently selected color options
document.querySelectorAll('.color-option').forEach(colorOption => colorOption.classList.remove('is-selected'));
colorOption.classList.add('is-selected');
const color = colorOption.dataset.color;
let root = document.documentElement;
root.style.setProperty('--primary-color', color);
localStorage.setItem(".color-option", "--primary-color");
localStorage.getItem("--primary-color");
});
body {
background-color: var(--primary-color);
}
.color-option {
height:35px;
width: 35px;
list-style: none;
border-radius: 4px;
margin: 7px;
transition: .2s;
cursor: pointer;
&:hover {
box-shadow: 0 0 0 5px rgba(0,0,0,.2);
}
&.is-selected {
transform: scale(1.1);
box-shadow: 0 0 0 5px rgba(0,0,0,.2);
}
}
.color-option:nth-child(1) { background: #3485fd }
.color-option:nth-child(2) { background: #002C5F }
.color-option:nth-child(3) { background: #00AFD8 }
.color-option:nth-child(4) { background: #5B1F69 }
.color-option:nth-child(5) { background: #FF5F1F }
.color-option:nth-child(6) { background: #ff00e2 }
<body>
<ul class="color-grid">
<li class="color-option is-selected" data-color="#3485fd"></li>
<li class="color-option" data-color="#002C5F"></li>
<li class="color-option" data-color="#00AFD8"></li>
<li class="color-option" data-color="#5B1F69"></li>
<li class="color-option" data-color="#FF5F1F"></li>
<li class="color-option" data-color="#ff00e2"></li>
</ul>
</body>
can't quite figure out what im doing wrong hopefully someone can help
You're almost there. As the other answer points out, you are not actually storing the selected color value.
You can think of localStorage as a store for key-value pairs. The syntax to set an item would be something like:
localStorage.setItem(<key>,<value>)
Where both key and value are strings. In order to store the user's color choice you'd have to do something like:
localStorage.setItem("selectedColor","#adadad")
Another missing piece is perhaps the code to load the previously selected color on page load.
PS: If you are trying to run this code in a sandbox (like the stack overflow code editor) you may not be able to access localStorage due to Cross Origin policies. Using localStorage in cases like this will throw an error (which may be why it works if you remove the localStorage part)
See sample implementation below:
const LS_COLOR_KEY = 'selected-color';
function selectColor(color){
document.querySelectorAll('.color-option').forEach(function(node){node.classList.remove('is-selected')});
document.querySelector('.color-option[data-color="'+color+'"]').classList.add('is-selected')
document.documentElement.style.setProperty("--primary-color", color);
localStorage.setItem(LS_COLOR_KEY, color);
}
document.addEventListener('DOMContentLoaded', function(){
// Retrieve and select any previously stored color
const storedColor = localStorage.getItem(LS_COLOR_KEY) || '#577590';
selectColor(storedColor);
})
document.addEventListener('click', function(e){
const colorOption = e.target.closest('.color-option');
if (!colorOption) return;
selectColor(colorOption.dataset.color);
})
:root {
--primary-color: transparent;
}
.color-option > .swatch {
height: 20px;
width: 20px;
margin: 0 0.25rem;
display: inline-block;
}
.color-option {
display: flex;
align-items: center;
margin: 0.25rem 0;
padding: 0.5rem 0;
cursor: pointer;
}
.color-option.is-selected{
border: 1px solid blue;
}
.selected-color {
background: var(--primary-color);
height: 100px;
width: 100px;
}
<div class="options">
<ul id="color-list">
<li data-color="#577590" class="color-option"><div class="swatch" style="background:#577590"> </div>Queen Blue</li>
<li data-color="#F3CA40" class="color-option"><div class="swatch" style="background:#F3CA40"></div>Maize Crayola</li>
<li data-color="#F08A4B" class="color-option"><div class="swatch" style="background:#F08A4B"></div>Mango Tango</li>
</ul>
</div>
<div class="selected-color"></div>
please check below
localStorage.setItem('bgcolor', 'red');
localStorage.getItem('bgcolor');
now look at your code, you have used .color-option as keyName,
but used another keyName in getItem --primary-color which is wrong.
localStorage.setItem(".color-option", "--primary-color");
localStorage.getItem("--primary-color");
it should be
localStorage.setItem(".color-option", "--primary-color-value");
localStorage.getItem(".color-option");
I don't think I get what you want really! but if you want to store the selected color in local storage and bring it back on every load you can save the actual value of the color and on every load, you will set the root property of the (--primary-color) to the value you stored. Like this
In your js file
let root = document.documentElement;
document.addEventListener("click", (e) => {
const colorOption = e.target.closest(".color-option");
if (!colorOption) return;
// unselect currently selected color options
document
.querySelectorAll(".color-option")
.forEach((colorOption) => colorOption.classList.remove("is-selected"));
colorOption.classList.add("is-selected");
const color = colorOption.dataset.color;
root.style.setProperty("--primary-color", color);
localStorage.setItem("selected-color", color);
});
window.onload = () => {
root.style.setProperty(
"--primary-color",
localStorage.getItem("selected-color")
);
};
I hope that solves what you want. thanks
Update 10/4/18: I've updated the Snippet to reflected changes for anyone who may stumble upon this thread in seek of help. Existing check-boxes and newly added check-boxes will open/close the menu.
var statusChangeMenu, activeList, itemCheckBox, activeItems;
statusChangeMenu = document.getElementById("status-change-menu");
activeList = document.getElementById("active-items");
itemCheckBox = activeList.getElementsByClassName("item-checkbox");
activeItems = activeList.getElementsByClassName("active-item-text");
function addNewItem(event) {
event.preventDefault();
activeList.insertAdjacentHTML("afterbegin", "\
<li class=\"item\">\
<input class=\"item-checkbox\" type=\"checkbox\" name=\"checkbox\" />\
<span class=\"active-item-text\"></span>\
<button class=\"btn-complete\">complete</button>\
</li>");
activeItems[0].textContent = document.getElementById("new-item-text").value;
}
document.getElementById("btn-add-item").addEventListener("click", addNewItem, false);
activeList.addEventListener("change", function() {
var i, len;
for (i = 0, len = itemCheckBox.length; i < len || (i = 0); ++i) {
if (itemCheckBox[i].checked) {
i = 40;
break;
}
}
statusChangeMenu.style.height = i + "px";
}, false);
*{
margin: 0;
padding: 0;
}
body{
background-color: #393F4D;
}
header{
background-color: #1D1E22;
color: #FEDA6A;
text-align: center;
font-size: 10px;
}
main{
background-color: #707070;
max-width: 700px;
margin: auto;
margin-top: 20px;
padding: 15px;
}
#status-change-menu{
background-color: rgb(218, 123, 123);
margin-top: 10px;
height: 0px;
overflow: hidden;
transition: all .25s ease-in-out;
}
#status-change-menu>button>img{
height: 40px;
}
form{
background-color: #D4D4DC;
padding: 10px;
text-align: right;
box-shadow: 1px 1px 3px;
}
#new-item-text{
width: 100%;
}
#btn-add-item{
padding: 5px;
box-shadow: 1px 1px 3px;
}
.item-list-container{
background-color: #D4D4DC;
margin-top: 20px;
box-shadow: 1px 1px 3px;
}
.item{
background-color: rgb(165, 233, 222);
list-style: none;
display: grid;
grid-template-columns: auto 1fr max-content;
grid-template-rows: 30px;
margin-top: 10px;
}
.item-checkbox{
grid-column: 1/2;
width: 30px;
margin:auto;
}
.active-item-text{
grid-column: 2/3;
background: rgb(252, 252, 252);
overflow: hidden;
}
.btn-complete{
grid-column: 3/4;
}
.item>input{
height: 20px;
}
<body id="the-list">
<header>
<h1>The List V4</h1>
</header>
<main>
<form action="#">
<textarea name="textbox" id="new-item-text" cols="30" rows="1"></textarea>
<button type="submit" id="btn-add-item">Add</button>
</form>
<div id="status-change-menu" class="change-menu">
<h3>Status Change Menu</h3>
<button class="btn-bar-hold">BTN1<img src="img/btn_hold.svg" alt=""></button>
<button class="btn-bar-delete">BTN2<img src="img/btn_delete.svg" alt=""></button>
</div>
<div class="item-list-container">
<ul id="active-items" class="item-list">
<li class="item">
<input class="item-checkbox" type="checkbox" name="checkbox">
<span class="active-item-text">random text text random</span>
<button class="btn-complete">complete</button>
</li>
<li class="item">
<input class="item-checkbox" type="checkbox" name="checkbox">
<span class="active-item-text">random text text random</span>
<button class="btn-complete">complete</button>
</li>
</ul>
</div>
</main>
</body>
I'm working on a simple checklist web app using pure vanilla HTML, CSS, javascript. I've been stuck in one part all weekend. Hoping someone can shed some light on what I'm missing or doing wrong. Here's where I'm at.
My Goal
Whenever an item in the checklist (ul) is selected (via checkbox), a hidden menu slides out with various options to manipulate the selected item(s). The menu must stay visible if any of the checkboxes on the list are checked. The menu must close if no checkboxes are checked.
Where I'm Stuck
I'm able to get the menu to slide out during a 'change' event of the checkbox, but I can't get the menu element to react after the initial change event. During debugging, it also appears the menu element is not reacting to the checkbox is in a 'checked' state, but simply just reacting to the checkbox being changed in general. Here's the JS code I have, but I've tested various other configurations with no success.
Code Pen with Full Code & Snippet of related JS code below.
Updated Codepen 10/4/18
https://codepen.io/skazx/pen/mzeoEO?
var itemCheckBox = document.querySelectorAll('input[type="checkbox"]')
var statusChangeMenu = document.getElementById("status-change-menu")
for(var i = 0 ; i < itemCheckBox.length; i++){
itemCheckBox[i].addEventListener("change", function(){
if (!itemCheckBox.checked)
{statusChangeMenu.style.height = "40px";}
else
{statusChangeMenu.style.height = "0px";}
})}
I've read a few dozen different post and articles, but most were related to only having 1 checkbox or used jquery. Let me know if you need any further details. Thank you!
itemCheckBox refers to a NodeList returned by querySelectorAll, not an individual element, so saying itemCheckBox.checked doesn't really make sense.
You should be checking if any checkbox in the list is checked, which you can use with the .some() function, like so:
Here's a working demo
for (var i = 0; i < itemCheckBox.length; i++) {
itemCheckBox[i].addEventListener("change", function(event) {
if (!event.target.checked) {
statusChangeMenu.style.height = "40px";
} else {
statusChangeMenu.style.height = "0px";
}
});
}
var itemCheckBox = document.querySelectorAll('input[type="checkbox"]');
var statusChangeMenu = document.getElementById("status-change-menu");
function changeHandler (event) {
// get the list of checkboxes in real time in case any were added to the DOM
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var anyChecked = [].some.call(checkboxes, function(checkbox) { return checkbox.checked; });
// alternatively (instead of using .some()):
// var anyChecked = false;
// checkboxes.forEach(function (checkbox) {
// if (checkbox.checked) {
// anyChecked = true;
// }
// });
if (anyChecked) {
statusChangeMenu.style.height = "40px";
} else {
statusChangeMenu.style.height = "0px";
}
}
for (var i = 0; i < itemCheckBox.length; i++) {
itemCheckBox[i].addEventListener("change", changeHandler);
}
for (var i = itemCheckBox.length; i < itemCheckBox.length + 2; i++) {
// add some checkboxes dynamically
var newCheckbox = document.createElement("input");
var newLabel = document.createElement("label");
newLabel.innerText = "Checkbox " + (i + 1);
newCheckbox.type = "checkbox";
// -- IMPORTANT-- bind event listener on dynamically added checkbox
newCheckbox.addEventListener("change", changeHandler);
newLabel.appendChild(newCheckbox);
newLabel.appendChild(document.createElement("br"));
document.body.appendChild(newLabel);
}
#status-change-menu {
height: 0;
background-color: red;
overflow: hidden;
color: white;
font-weight: bold;
}
<div id="status-change-menu">I should be visible if any checkboxes are checked</div>
<label>Checkbox 1<input type="checkbox"/></label><br/>
<label>Checkbox 2<input type="checkbox"/></label><br/>
<label>Checkbox 3<input type="checkbox"/></label><br/>
mhodges is correct in that itemCheckBox is a NodeList, not an individual element. Another issue is that you are trying to test if the box that changed is checked, and if it isn't, you are closing the menu. As you described, that is not what you want.
You need another way to check to see if all check boxes are unchecked before you close the menu. A simple way to do that is just another inner loop in the onChange function:
for(var i = 0 ; i < itemCheckBox.length; i++){
itemCheckBox[i].addEventListener("change", function(){
showMenu = false
for(var j = 0; j < itemCheckBox.length; j++)
{
if(itemCheckBox[j].checked)
showMenu = true
}
if (showMenu)
{statusChangeMenu.style.height = "40px";}
else
{statusChangeMenu.style.height = "0px";}
})}
Heres a modified Snippet
I am using jQuery, and I'm have not used it a lot before so I'm a newbie.
I'm trying to make a slide in menu, and I found code for it. The problem, however, is when I insert it into my existing code in Sublime Text. For some reason the javascript does not work.
$(".myButton").click(function() {
var effect = 'slide';
var options = {
direction: $('.mySelect').val()
};
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});
.myButton {
font-size: 1em;
cursor: pointer;
font-weight: bold;
}
.mySelect {
padding: .2em 0;
font-size: 1em;
display: none;
}
#myDiv {
color: #fff;
background-color: pink;
border: 2px solid #000;
display: none;
text-align: justify;
padding-left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myButton">
run effect
</div>
<select class="mySelect">
<option value="left">Left</option>
</select>
<div id="myDiv">
<ul>
<li> episoder </li>
<li> - </li>
<li> karakterer </li>
<li> - </li>
<li> medvirkende </li>
<li> - </li>
<li> produksjon </li>
</ul>
</div>
I have set, .mySelect { display: none; }, because I don't want the user to be able to choose which side it will enter from.
You need to make sure your jQuery code runs when the DOM has been loaded. To do that you can place the <script> block just before the </body> tag. Alternatively you can place it in the <head> and wrap your JS code in a document.ready event handler, like this:
$(function() {
$(".myButton").click(function() {
var effect = 'slide';
var options = {
direction: $('.mySelect').val()
};
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});
});
I'm trying to have a bgcolor change for an element on mouseover, mouseout, and onclick. The problem is Javascript overwrites my onclick with mouseout, so I can't have both. So is there any way to have mouseover reset after mouseout?
function init() {
document.getElementById('default').onmouseover = function() {
tabHoverOn('default', 'grey')
};
document.getElementById('default').onmouseout = function() {
tabHoverOff('default', 'yellow')
};
document.getElementById('section2').onmouseover = function() {
tabHoverOn('section2', 'grey')
};
document.getElementById('section2').onmouseout = function() {
tabHoverOff('section2', 'yellow')
};
document.getElementById('section3').onmouseover = function() {
tabHoverOn('section3', 'grey')
};
document.getElementById('section3').onmouseout = function() {
tabHoverOff('section3', 'yellow')
};
}
function tabHoverOn(id, bgcolor) {
document.getElementById(id).style.backgroundColor = bgcolor;
}
function tabHoverOff(id, bgcolor) {
document.getElementById(id).style.backgroundColor = bgcolor;
}
var current = document.getElementById('default');
function tab1Highlight(id) {
if (current != null) {
current.className = "";
}
id.className = "tab1highlight";
current = id;
}
function tab2highlight(id) {
if (current != null) {
current.className = "";
}
id.className = "tab2highlight";
current = id;
}
function tab3highlight(id) {
if (current != null) {
current.className = "";
}
id.className = "tab3highlight";
current = id;
}
window.onload = init();
body {
width: 900px;
margin: 10px auto;
}
nav {
display: block;
width: 80%;
margin: 0 auto;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
margin: 0 3px;
width: 150px;
}
nav > ul > li > a {
width: 100%;
background-color: #ffff66;
border: 1px solid #9b9b9b;
border-radius: 12px 8px 0 0;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
font-family: arial, sans-serif;
}
main {
display: block;
width: 80%;
margin: 0 auto;
border: 1px solid #9b9b9b;
padding: 10px;
}
main > h1 {
font-size: 1.5em;
}
.tab1highlight {
background-color: #339966;
color: white;
}
.tab2highlight {
background-color: #ff6666;
color: white;
}
.tab3highlight {
background-color: #6600ff;
color: white;
}
main img {
border: 5px solid #eeefff;
width: 80%;
margin-top: 20px;
}
<body>
<nav>
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</nav>
<main>
<h1>Exercise: Navigation Tab #5</h1>
<ul>
<li>
Combine the navigation tab exercises #1, #3, and #4 in one file, including <br>
<ul>
<li>temporarily change the background color of a tab when the cursor is hovering on it.</li>
<li>set the foreground and background color of the tab being clicked.</li>
<li>change the background color of the main element based on the selected tab.</li>
</ul>
<p>
To test, click on a tab and then move your mouse around. For example, the third tab is clicked, the tab background color is switched to blue. Then hover the mouse over the third tab, the background color of the tab should be switch to light green and then back to blue after the mouse moves out.
</p>
<img src="menu_tab5.jpg">
</li>
</ul>
</main>
It's generally a good idea to keep CSS out of JavaScript completely if you can help it. A better strategy for solving the hover problem is to use the CSS pseudo selector :hover rather than coding the color changes in JavaScript. If you give all your tabs the same class, you only have to write the CSS once:
.tab {
background-color: yellow;
}
.tab:hover {
background-color: grey;
}
Once you've done that, you can also relegate the click styling to CSS by creating an event handler that adds and removes a special class each time a tab is clicked.
In the CSS file:
.tab.clicked {
background-color: blue;
}
And then in JavaScript, something like:
var tabs = document.getElementsByClassName('tab');
for (i = 0; i < tabs.length; i ++) {
tabs[i].onclick = function (ev) {
for (i = 0; i < tabs.length; i ++) {
tabs[i].classList.remove('clicked');
}
ev.currentTarget.classList.add('clicked');
};
}
I've created a JSFiddle to illustrate.
Try updating a Boolean variable.
var Ele = document.getElementById('default');
var clicked = false;
Ele.onclick = function(){
clicked = true;
// add additional functionality here
}
Ele.onmouseover = function(){
clicked = false;
// add additional functionality here
}
Ele.onmouseout = function(){
if(!clicked){
// add additional functionality here
}
}
I'm attempting to build an accordion menu using querySelectorAll() but unsure what the best method would be to check if the clicked list item's children (.toggleContent and .toggleIcon) belong to it's clicked parent toggle_li[i].
Correct me if I am wrong, but I assume that controlling this within the onclick function will be more flexible than impacting the toggleDataAttr function?
I'm still new to querySelector so any guidance is appreciated.
codepen: http://codepen.io/seejaeger/pen/qdqxGy
// data attribute toggle
var toggleDataAttr = function (toggleElem, opt1, opt2, dataAttr) {
//
// ? belongs to clicked element (parent toggle_li[i])?
//
var toggleElem = document.querySelector(toggleElem);
toggleElem.setAttribute(dataAttr,
toggleElem.getAttribute(dataAttr) === opt1 ? opt2 : opt1);
};
// declare toggle onclick element
var toggle_li = document.querySelectorAll('li');
// iterate query and listen for clicks
for (var i = 0; i < toggle_li.length; i++) {
toggle_li[i].onclick = function() {
//
// ? belongs to clicked element (parent toggle_li[i])?
//
toggleDataAttr('.toggleContent', 'closed', 'open', 'data-state');
toggleDataAttr('.toggleIcon', 'plus', 'minus', 'data-icon');
};
}
Here is what I think you should do:
Update your toggleDataAttr function to receive one more parameter parentElem.
Use this new parentElem for querySelector instead of document inside toggleDataAttr.
And then in your loop, pass this as parameter to be used as parentElem.
Snippet:
var toggleDataAttr = function(parentElem, toggleElem, opt1, opt2, dataAttr) {
var toggleElem = parentElem.querySelector(toggleElem);
toggleElem.setAttribute(dataAttr, toggleElem.getAttribute(dataAttr) === opt1 ? opt2 : opt1);
};
var toggle_li = document.querySelectorAll('li');
for (var i = 0; i < toggle_li.length; i++) {
toggle_li[i].onclick = function() {
toggleDataAttr(this, '.toggleContent', 'closed', 'open', 'data-state');
toggleDataAttr(this, '.toggleIcon', 'plus', 'minus', 'data-icon');
};
}
body {
background: #034;
opacity: 0.9;
font-family: sans-serif;
font-size: 24px;
font-weight: 300;
letter-spacing: 2px;
}
ul {
list-style: none;
padding: 0 24px;
width: 30%;
overflow: hidden;
color: #333;
}
li {
background: #eee;
padding: 0px;
border-bottom: 2px solid #aaa;
}
i {
font-style: normal;
}
.li-label {
padding: 18px;
}
.toggleContent {
padding: 18px 14px;
border-top: 2px solid #bac;
background: #334;
color: #eee;
}
.toggleContent[data-state=closed] {
display: none;
}
.toggleContent[data-state=open] {
display: block;
}
.toggleIcon[data-icon=plus]:after {
content: '+';
float: right;
}
.toggleIcon[data-icon=minus]:after {
content: '-';
float: right;
}
<ul>
<li>
<div class="li-label">
list item one <i class="toggleIcon" data-icon="plus"></i>
</div>
<div class="toggleContent" data-state="closed">toggle content one</div>
</li>
<li>
<div class="li-label">
list item two <i class="toggleIcon" data-icon="plus"></i>
</div>
<div class="toggleContent" data-state="closed">toggle content two</div>
</li>
<li>
<div class="li-label">
list item three <i class="toggleIcon" data-icon="plus"></i>
</div>
<div class="toggleContent" data-state="closed">toggle content three</div>
</li>
</ul>
Hope it helps.