As the question suggests, I want to add 'On' or 'Off' text inside the toggle switch depending on the switch state using js only. There are few examples in this topic, but unable to grip. The MWE is presented below:
window.addEventListener('DOMContentLoaded', function() {
var swPos = [Math.random() >= 0.5];
var swConnection = ["a0"];
switchPosition(swPos, swConnection);
var togglebtns = document.getElementsByClassName('togglebtn');
for (var i = 0; i < togglebtns.length; i++) {
togglebtns[i].addEventListener('click', function() {
changingPin = Number(this.id.substr(2));
swPos[changingPin] = !swPos[changingPin];
drawSwitch(this.id.substr(2), swPos[changingPin]);
});
}
}, false);
function switchPosition(swPos, swConnection) {
for (i = 0; i < swConnection.length; i++) {
drawSwitch(pad(i, 2), swPos[i]);
}
}
function drawSwitch(pinNoStr, state) {
var btnWrapper = document.getElementById('tb' + pinNoStr);
var btn = document.getElementById('mt' + pinNoStr);
if (state == true) {
btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
btnWrapper.style.background = '#7bc77b';
btnWrapper.style.border = '1px solid #7bc77b';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
background: gradient-gradient(#ffffff, #77a1b9);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);'
} else {
btn.style.left = '0px';
btnWrapper.style.background = 'lightgrey';
btnWrapper.style.border = '1px solid lightgrey';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
background: gradient-gradient(#36455b, #283446);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);'
}
}
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
* {
margin: 0;
padding: 0;
}
.dc {
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
background: rgb(183, 154, 216);
}
.tbanimate {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.togglebtn {
width: 75px;
height: 33px;
float: left;
background: lightgray;
border-radius: 9999px;
border: 2px solid lightgray;
}
.mainToggle {
width: 33px;
height: 33px;
background: whitesmoke;
border-radius: 9999px;
position: relative;
left: 0;
}
.light {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin: 10px;
border-radius: 9999px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 2;
}
<section class="dc" id="00">
<div>
<div class="togglebtn tbanimate" id="tb00">
<div class="mainToggle tbanimate" id="mt00"></div>
</div>
<div class="light" id="l00"></div>
</div>
</section>
Extra: Is this possible to make a draggable switch. Currently, only click can change state. It would be nice if I can drag the circle from one side to another. Pure JS, CSS.
You change the textContent of the #mt00 div based on the value of the boolean inside swPos.
* {
margin: 0;
padding: 0;
}
.dc {
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
background: rgb(183, 154, 216);
}
.tbanimate {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.togglebtn {
width: 75px;
height: 33px;
float: left;
background: lightgray;
border-radius: 9999px;
border: 2px solid lightgray;
}
.mainToggle {
width: 33px;
height: 33px;
background: whitesmoke;
border-radius: 9999px;
position: relative;
left: 0;
}
.light {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin: 10px;
border-radius: 9999px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 2;
}
#mt00{
vertical-align: middle;
display: table-cell;
}
<section class="dc" id="00">
<div>
<div class="togglebtn tbanimate" id="tb00">
<div class="mainToggle tbanimate" id="mt00"></div>
</div>
<div class="light" id="l00"></div>
</div>
<span id="result"></span>
</section>
<script>
window.addEventListener('DOMContentLoaded', function() {
var swPos = [Math.random() >= 0.5];
var swConnection = ["a0"];
var mtoo = document.getElementById('mt00');
if(swPos[0]){
mtoo.innerHTML = "On";
} else {
mtoo.innerHTML= "Off";
}
switchPosition(swPos, swConnection);
var togglebtns = document.getElementsByClassName('togglebtn');
for (var i = 0; i < togglebtns.length; i++) {
togglebtns[i].addEventListener('click', function() {
changingPin = Number(this.id.substr(2));
swPos[changingPin] = !swPos[changingPin];
if(swPos[changingPin]){
mtoo.innerHTML = "On";
} else {
mtoo.innerHTML = "Off";
}
drawSwitch(this.id.substr(2), swPos[changingPin]);
});
}
}, false);
function switchPosition(swPos, swConnection) {
for (i = 0; i < swConnection.length; i++) {
drawSwitch(pad(i, 2), swPos[i]);
}
}
function drawSwitch(pinNoStr, state) {
var btnWrapper = document.getElementById('tb' + pinNoStr);
var btn = document.getElementById('mt' + pinNoStr);
if (state == true) {
btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
btnWrapper.style.background = '#7bc77b';
btnWrapper.style.border = '1px solid #7bc77b';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
background: gradient-gradient(#ffffff, #77a1b9);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);'
} else {
btn.style.left = '0px';
btnWrapper.style.background = 'lightgrey';
btnWrapper.style.border = '1px solid lightgrey';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
background: gradient-gradient(#36455b, #283446);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);'
}
}
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
</script>
I have managed to do with pseudo elemets :after and :before
You need to give relative position to the parent, and absolute position to the :after and :before.
(()=>{
var swPos = [Math.random() >= 0.5];
var swConnection = ["a0"];
if(swPos[0]){
document.getElementById("tb00").classList.add("on-text");
document.getElementById("tb00").classList.remove("off-text");
} else {
document.getElementById("tb00").classList.add("off-text");
document.getElementById("tb00").classList.remove("on-text");
}
switchPosition(swPos, swConnection);
var togglebtns = document.getElementsByClassName('togglebtn');
for (var i = 0; i < togglebtns.length; i++) {
togglebtns[i].addEventListener('click', function() {
changingPin = Number(this.id.substr(2));
swPos[changingPin] = !swPos[changingPin];
if(swPos[changingPin]){
document.getElementById("tb00").classList.add("on-text");
document.getElementById("tb00").classList.remove("off-text");
} else {
document.getElementById("tb00").classList.add("off-text");
document.getElementById("tb00").classList.remove("on-text");
}
drawSwitch(this.id.substr(2), swPos[changingPin]);
});
}
})();
function switchPosition(swPos, swConnection) {
for (i = 0; i < swConnection.length; i++) {
drawSwitch(pad(i, 2), swPos[i]);
}
}
function drawSwitch(pinNoStr, state) {
var btnWrapper = document.getElementById('tb' + pinNoStr);
var btn = document.getElementById('mt' + pinNoStr);
if (state == true) {
btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
btnWrapper.style.background = '#7bc77b';
btnWrapper.style.border = '1px solid #7bc77b';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
background: gradient-gradient(#ffffff, #77a1b9);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(100,231,253,1), inset 0 0 8px rgba( 61,157,247,0.8), inset 0 -2px 5px rgba(185,231,253,0.3), inset 0 -3px 8px rgba(185,231,253,0.5);'
} else {
btn.style.left = '0px';
btnWrapper.style.background = 'lightgrey';
btnWrapper.style.border = '1px solid lightgrey';
document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
background: gradient-gradient(#36455b, #283446);\
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(185,231,253,0), inset 0 0 8px rgba(0,0,0,0.9), inset 0 -2px 5px rgba(0,0,0,0.3), inset 0 -5px 5px rgba(0,0,0,0.5);'
}
}
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
* {
margin: 0;
padding: 0;
}
.dc {
margin: 10px 50px 10px 50px;
padding: 10px 10px 10px 10px;
background: rgb(183, 154, 216);
}
.tbanimate {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.togglebtn {
width: 75px;
height: 33px;
float: left;
background: lightgray;
border-radius: 9999px;
border: 2px solid lightgray;
position: relative;
}
.on-text:before {
content: 'On';
position: absolute;
top: 8px;
left: 8px;
}
.off-text:after {
content: 'Off';
position: absolute;
top: 8px;
right: 8px;
}
.mainToggle {
width: 33px;
height: 33px;
background: whitesmoke;
border-radius: 9999px;
position: relative;
left: 0;
}
.light {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin: 10px;
border-radius: 9999px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
z-index: 2;
}
<section class="dc" id="00">
<div>
<div class="togglebtn tbanimate off-text" id="tb00">
<div class="mainToggle tbanimate" id="mt00"></div>
</div>
<div class="light" id="l00"></div>
</div>
</section>
Related
I'm trying to make a health bar for a game where I have 2 buttons linked to the bar, one adds damage and the other adds health. I have it all designed the way I want it but am having trouble with the JavaScript part. The buttons are linked but when I click to add damage or health it only adjusts the amount of HP by one in either direction but no more than that. I also can't figure out how to make the width of the bar move with the number associated with the amount of health. I think I'm close but just need a little help. I'll add the CSS code too so there is some more context.
function add() {
let addHealth = document.getElementById('health')
let width = 100;
addHealth.width += 1;
if (addHealth) {
addHealth.style.width = width + '%';
addHealth.innerHTML = width * 1 + 'hp';
}
}
function remove() {
let damage = document.getElementById('health')
let width = 100;
damage.width -= 1;
if (damage) {
damage.style.width = width + '%';
damage.innerHTML = width - 1 + 'hp';
}
}
.hp {
text-align: center;
padding-bottom: 50px;
}
.gage {
display: inline-block;
width: 500px;
padding-bottom: 30px;
}
.bar {
height: 60px;
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.bar>span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
background-image: linear-gradient( center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.lvl {
background-color: #078a25;
background-image: linear-gradient(to bottom, #078a25, #f36d0a);
}
#health {
font-size: 20px;
color: white;
font-weight: bold;
text-align: right;
}
.btn-3d {
position: relative;
display: inline-block;
font-size: 22px;
padding: 20px 60px;
color: white;
margin: 20px 10px 10px;
border-radius: 6px;
text-align: center;
transition: top .01s linear;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
cursor: pointer;
}
.btn-3d.green:hover {
background-color: #80C49D;
}
.btn-3d:active {
top: 9px;
}
.btn-3d.green {
background-color: #82c8a0;
box-shadow: 0 0 0 1px #82c8a0 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 rgba(126, 194, 155, .7), 0 8px 0 1px rgba(0, 0, 0, .4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn-3d.green:active {
box-shadow: 0 0 0 1px #82c8a0 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.btn-3d.red:hover {
background-color: #e74c3c;
}
.btn-3d.red {
background-color: #e74c3c;
box-shadow: 0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #C24032, 0 8px 0 1px rgba(0, 0, 0, 0.4), 0 8px 8px 1px rgba(0, 0, 0, 0.5);
}
.btn-3d.red:active {
box-shadow: 0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 0 0 1px rgba(0, 0, 0, 0.4);
}
<div class="hp">
<div class="gage">
<div class="bar">
<span id="health" class="lvl" style="width: 100%">100hp</span>
</div>
</div>
<div class="click">
<span class="btn-3d green" onclick="add()">Health</span>
<span class="btn-3d red" onclick="remove()">Damage</span>
</div>
</div>
Also, if anyone has any ideas to improve the design I'm all ears!
In your example you merely change the output but never the actual health width itself. Here is a quick analysis
function add() {
//REM: You fetch the element correctly;
let addHealth = document.getElementById('health')
//REM: You reset the heath to 100 for some reason?
let width = 100;
//REM: You change a width property of the element?
//REM: Here you should reduce the value of width
addHealth.width += 1;
if (addHealth) {
//REM: You set the width of the element according to the health, which seems correct
addHealth.style.width = width + '%';
//REM: You set the displayed value to 100, since width always gets set to 100 inside the function
addHealth.innerHTML = width * 1 + 'hp';
}
}
The most simple way is to store the health in a seperate variable and build on that.
var _Health = 100; //REM: Default HP
function add() {
let addHealth = document.getElementById('health')
_Health += 1;
if (addHealth) {
addHealth.style.width = _Health + '%';
addHealth.innerHTML = _Health + 'hp';
}
}
function remove() {
let damage = document.getElementById('health')
_Health -= 1;
if(damage) {
damage.style.width = _Health + '%';
damage.innerHTML = _Health + 'hp';
}
}
.hp {
text-align: center;
padding-bottom: 50px;
}
.gage {
display: inline-block;
width: 500px;
padding-bottom: 30px;
}
.bar {
height: 60px;
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.bar > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.lvl {
background-color: #078a25;
background-image: linear-gradient(to bottom, #078a25, #f36d0a);
}
#health {
font-size: 20px;
color: white;
font-weight: bold;
text-align: right;
}
.btn-3d {
position: relative;
display: inline-block;
font-size: 22px;
padding: 20px 60px;
color: white;
margin: 20px 10px 10px;
border-radius: 6px;
text-align: center;
transition: top .01s linear;
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
cursor: pointer;
}
.btn-3d.green:hover {background-color: #80C49D;}
.btn-3d:active {
top: 9px;
}
.btn-3d.green {
background-color: #82c8a0;
box-shadow: 0 0 0 1px #82c8a0 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 8px 0 0 rgba(126, 194, 155, .7),
0 8px 0 1px rgba(0,0,0,.4),
0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.green:active {
box-shadow: 0 0 0 1px #82c8a0 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 0 0 1px rgba(0,0,0,0.4);
}
.btn-3d.red:hover {background-color: #e74c3c;}
.btn-3d.red {
background-color: #e74c3c;
box-shadow: 0 0 0 1px #c63702 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 8px 0 0 #C24032,
0 8px 0 1px rgba(0,0,0,0.4),
0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.red:active {
box-shadow: 0 0 0 1px #c63702 inset,
0 0 0 2px rgba(255,255,255,0.15) inset,
0 0 0 1px rgba(0,0,0,0.4);
}
<div class="hp">
<div class="gage">
<div class="bar">
<span id="health" class="lvl" style="width: 100%">100hp</span>
</div>
</div>
<div class="click">
<span class="btn-3d green" onclick="add()">Health</span>
<span class="btn-3d red" onclick="remove()">Damage</span>
</div>
</div>
Change the JS to:
let width=100;
function add() {
let addHealth = document.getElementById('health')
width +=1;
if (addHealth) {
addHealth.style.width = width + '%';
addHealth.innerHTML = width * 1 + 'hp';
}
}
function remove() {
let damage = document.getElementById('health')
width-=1;
if(damage) {
damage.style.width = width + '%';
damage.innerHTML = width - 1 + 'hp';
}
}
You had to make the variable width a global variable. And actually add and subtract from that variable.
You can try this
let width = 100;
function add() {
let addHealth = document.getElementById('health')
width =width+ 1
width=width>100?width=100:width
if(addHealth){
addHealth.style.width = width + '%';
addHealth.innerHTML = width + 'hp';
}
}
function remove() {
let damage = document.getElementById('health')
width =width- 1
width=width<0?width=0:width
if(damage) {
damage.style.width = width + '%';
damage.innerHTML = width + 'hp';
}
}
it's better to use the object to control the limitation.
const healthObject = {
_currentHelth: 100,
getHealth: function () {
return this._currentHelth
},
increase: function () {
if (this._currentHelth < 100) {
this._currentHelth++
}
},
decrease: function () {
if (this._currentHelth > 0) {
this._currentHelth--
}
},
}
function add() {
let addHealth = document.getElementById('health')
healthObject.increase()
if (addHealth) {
addHealth.style.width = healthObject.getHealth() + '%'
addHealth.innerHTML = healthObject.getHealth() + 'hp'
}
}
function remove() {
let addHealth = document.getElementById('health')
healthObject.decrease()
if (addHealth) {
addHealth.style.width = healthObject.getHealth() + '%'
addHealth.innerHTML = healthObject.getHealth() + 'hp'
}
}
I need to change some background color with a smooth transition from right to left instead of just changing the color in a uniform way. I will now provide you my code, so that maybe it will be more clear.
NO jQuery/libraries allowed
HTML
<div id=astuccio>
<div class="cBox" id="cBox1">
<div class="color" id="color1"></div>
</div>
<div class="cBox" id="cBox2">
<div class="color" id="color2"></div>
</div>
<div class="cBox" id="cBox3">
<div class="color" id="color3"></div>
</div>
</div>
<button class="js" id="roll">⋁</button>
CSS
#astuccio {
grid-row: 1/2;
margin: auto;
}
.cBox {
width: 50px;
height: 50px;
display:inline-block;
margin: auto;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
border: 0.5px solid rgb(175,175,175);
box-sizing: content-box;
transition: 0.5s;
}
#cBox1 {
margin: auto 0px auto auto;
}
#cBox2 {
width: 100px;
height: 100px;
}
#cBox3 {
margin: auto auto auto 0;
}
.color{
width: 40px;
height: 40px;
vertical-align: middle;
margin-left: 5px;
margin-top: 5px;
text-align: center;
position: relative;
background: tomato;
display: inline-block;
border: 1px solid black;
z-index: 10;
transition: 0.5s linear;
transform-origin: left;
}
#color1 {
background: pink;
}
#color2 {
width: 90px;
height: 90px;
background: pink;
transition-delay: 0.2s;
}
#color3 {
background: pink;
transition-delay: 0.4s;
}
#roll {
grid-row: 2/3;
width: 45px;
height: 45px;
margin: auto;
cursor: pointer;
border-radius: 500px 500px 500px 500px;
-moz-border-radius: 500px 500px 500px 500px;
-webkit-border-radius: 500px 500px 500px 500px;
border: 1px solid rgba(0,0,0,0.5);
box-sizing: border-box;
line-height: 45px;
text-align: center;
font-weight: lighter;
font-size: 1.2em;
color: rgba(0,0,0,0.9);
background: transparent;
}
Javascript
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function gestoreGiro () {
bott.disabled= true;
bott.setAttribute("style", "background:gray")
t = setInterval(scorri, 500);
setTimeout(riattiva, 5000);
}
function riattiva() {
document.getElementById('roll').disabled = false;
bott.setAttribute("style", "background:none");
}
function scorri() {
var n = i - 1;
var lunghezza = listaColori["colori"].length;
const valore = getRandomInt(listaColori["colori"].length);
if (i>listaColori["colori"].length-1) {
i = 0;
}
if (n < 0) {
n = lunghezza-1;
}
if (m>listaColori["colori"].length-1) {
m = 0;
}
S1.setAttribute("style","background:"+listaColori["coloriHEX"][n]);
S2.setAttribute("style","background:"+listaColori["coloriHEX"][i]);
S3.setAttribute("style","background:"+listaColori["coloriHEX"][m]);
i++;
m++;
flag++;
if (flag==13) {
clearInterval(t);
n = valore-1;
m = valore +1;
if (n < 0) {
n = lunghezza-1;
}
if (m>lunghezza-1) {
m = 0;
}
S1.setAttribute("style","background:"+listaColori["coloriHEX"][n]);
S2.setAttribute("style","background:"+listaColori["coloriHEX"][valore]);
S3.setAttribute("style","background:"+listaColori["coloriHEX"][m]);
flag = 0;
}
}
var S1 ;
var S2 ;
var S3 ;
var bott;
var i = 0;
var m = i+1;
var t;
var flag = 0;
function gestoreLoad () {
S1 = document.getElementById("color1") ;
S2 = document.getElementById("color2") ;
S3 = document.getElementById("color3") ;
bott = document.getElementById("roll");
bott.onclick = gestoreGiro;
}
window.onload = gestoreLoad;
var listaColori = {
colori: ["verde", "giallo", "rosso", "blu", "nero", "bianco"],
coloriHEX: ["#2e8b57", "#ffd700", "#ff6347", "#4169e1", "#000000", "#ffffff"]
}
I am sorry if my explanation appears poor: I'll be happy to answer your doubts.
You could do it very simply with css transition. This method work on :hover. Working CodePen.
HTML
<div>
<p>This is some text</p>
</div>
CSS
div {
padding: 20px;
width: 100px;
background: linear-gradient( to left, red 50%, blue 50% );
background-size: 200% 100%;
background-position: right bottom;
transition: all ease 1s;
color: white;
}
div:hover {
background-position: left bottom;
}
In my code I can introduce text to the canvas and I can also change the color and the location. I tried to put a custom font for the text input but it's not working(it remains the standard one which I think is Arial). Can you please help me with this one? This is my JsFiddle code: https://jsfiddle.net/x6dqox1t/ .Thank you for your time.
Here is my CSS code:
#canvas3 {
border: 2px dotted black;
border-radius: 5px;
position: absolute;
}
#canvas4 {
border: 2px dotted black;
border-radius: 5px;
position: absolute;
}
.green {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: #009933;
}
.green:hover,
.green:active,
.green:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.red {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: #ff0000;
}
.red:hover,
.red:active,
.red:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.orange {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: orange;
}
.orange:hover,
.orange:active,
.orange:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
#font-face {
font-family: 'KulminoituvaRegular';
src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
}
Here is my JAVASCRIPT code:
var canvas3 = document.getElementById("canvas3");
var ctx3 = canvas3.getContext("2d");
ctx3.font = " bold 90px KulminoituvaRegular";
ctx3.fillStyle = "black";
ctx3.textAlign = "center";
var $text3 = document.getElementById("sourceText3");
$text3.onkeyup = function(e) {
redrawTextsCan3();
}
function redrawTextsCan3() {
ctx3.clearRect(0, 0, canvas3.width, canvas3.height);
wrapText(ctx3, $text3.value, 66.5, 82, "KulminoituvaRegular");
}
function wrapText(context, text, x, y, maxWidth, fontSize, fontFace) {
var words = text.split(' ');
var line = '';
var lineHeight = fontSize;
context.font = fontSize + " " + fontFace;
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);
return (y);
}
var loc = document.getElementById("canvas3");
var ctxx = loc.getContext("2d");
function path3(v2) {
switch (v2) {
// top: 103px; left: 210px
case "rightabove":
loc.style.top = "93px";
loc.style.left = "130px";
loc.style.position = "absolute";
break;
case "rightbelow":
loc.style.top = "133px";
loc.style.left = "130px";
loc.style.position = "absolute";
break;
case "left":
loc.style.top = "113px";
loc.style.left = "400px";
loc.style.position = "absolute";
break;
case "center":
loc.style.top = "113px";
loc.style.left = "173px";
loc.style.position = "absolute";
break;
}
redrawTextsCan3();
}
function color3(v4) {
v4 = v4.dataset.id;
switch (v4) {
// top: 103px; left: 210px
case "black":
ctx3.fillStyle = '#000000';
break;
case "red":
ctx3.fillStyle = "#ff0000";
break;
case "green":
ctx3.fillStyle = "#009933";
break;
case "orange":
ctx3.fillStyle = "#ff9900";
break;
}
redrawTextsCan3();
}
Here is HTML code:
<div>
<select name="change1" onchange="path3(this.value)">
<option value="left">Left</option>
<option value="center" selected>Center</option>
<option value="rightabove">Right Above</option>
<option value="rightbelow">Right Below</option>
</select>
<h3 style="font-size: 15px;padding-top: 0px">Choose Colour</h3>
<button type="button" class="black" data-id="black" onclick="color3(this)">
</button>
<button type="button" class="red" data-id="red" onclick="color3(this)">
</button>
<button type="button" class="green" data-id="green" onclick="color3(this)">
</button>
<button type="button" class="orange" data-id="orange" onclick="color3(this)"></button>
<h3 style="font-size: 15px;padding-top: 0px">Number</h3>
<input id="sourceText3" maxlength="1" type="text" style="height: 32px;width: 223px;">
<canvas id="canvas3" width="150" height="150" style="position: absolute; top: 113px; left: 400px; z-index: 10;"></canvas>
</div>
The reason your font isn't working is because the font source (http://www.miketaylr.com/f/kulminoituva.ttf) is loaded over http, while the jsfiddle is loaded over https. So you get a Mixed Content Error.
I've uploaded that font to GitHub, then used RawGit to generate a source link.
var canvas3 = document.getElementById("canvas3");
var ctx3 = canvas3.getContext("2d");
ctx3.font = "90px MyFont";
ctx3.fillStyle = "black";
ctx3.textAlign = "center";
var $text3 = document.getElementById("sourceText3");
$text3.onkeyup = function(e) {
redrawTextsCan3();
}
function redrawTextsCan3() {
ctx3.clearRect(0, 0, canvas3.width, canvas3.height);
wrapText(ctx3, $text3.value, 66.5, 82, "MyFont");
}
function wrapText(context, text, x, y, maxWidth, fontSize, fontFace) {
var words = text.split(' ');
var line = '';
var lineHeight = fontSize;
context.font = fontSize + " " + fontFace;
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);
return (y);
}
var loc = document.getElementById("canvas3");
var ctxx = loc.getContext("2d");
function path3(v2) {
switch (v2) {
// top: 103px; left: 210px
case "rightabove":
loc.style.top = "93px";
loc.style.left = "130px";
loc.style.position = "absolute";
break;
case "rightbelow":
loc.style.top = "133px";
loc.style.left = "130px";
loc.style.position = "absolute";
break;
case "left":
loc.style.top = "113px";
loc.style.left = "400px";
loc.style.position = "absolute";
break;
case "center":
loc.style.top = "113px";
loc.style.left = "173px";
loc.style.position = "absolute";
break;
}
redrawTextsCan3();
}
function color3(v4) {
v4 = v4.dataset.id;
switch (v4) {
// top: 103px; left: 210px
case "black":
ctx3.fillStyle = '#000000';
break;
case "red":
ctx3.fillStyle = "#ff0000";
break;
case "green":
ctx3.fillStyle = "#009933";
break;
case "orange":
ctx3.fillStyle = "#ff9900";
break;
}
redrawTextsCan3();
}
#canvas3 {
border: 2px dotted black;
border-radius: 5px;
position: absolute;
}
#canvas4 {
border: 2px dotted black;
border-radius: 5px;
position: absolute;
}
.green {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: #009933;
}
.green:hover,
.green:active,
.green:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.red {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: #ff0000;
}
.red:hover,
.red:active,
.red:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.black {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: black;
}
.black:hover,
.black:active,
.black:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.orange {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: orange;
}
.orange:hover,
.orange:active,
.orange:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
#font-face {
font-family: 'MyFont';
src: url('https://cdn.rawgit.com/BlazingFire007/Misc/d656d2e6/kulminoituva.ttf');
}
<div>
<select name="change1" onchange="path3(this.value)">
<option value="left">Left</option>
<option value="center" selected>Center</option>
<option value="rightabove">Right Above</option>
<option value="rightbelow">Right Below</option>
</select>
<h3 style="font-size: 15px;padding-top: 0px">Choose Colour</h3>
<button type="button" class="black" data-id="black" onclick="color3(this)"></button>
<button type="button" class="red" data-id="red" onclick="color3(this)"></button>
<button type="button" class="green" data-id="green" onclick="color3(this)"></button>
<button type="button" class="orange" data-id="orange" onclick="color3(this)"></button>
<h3 style="font-size: 15px;padding-top: 0px">Number</h3>
<input id="sourceText3" maxlength="2" type="text" style="height: 32px;width: 223px;">
<canvas id="canvas3" width="150" height="150" style="position: absolute; top: 113px; left: 400px; z-index: 10;"></canvas>
</div>
I have code below for an accordion list. How do I get a plus and minus sign in the left corner of the heading when opened I open and close the list, without changing the position of the text? Anything helps, cheers.
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
/*All paragraphs*/
.p {
margin: 5px;
color: #007a5e;
}
.bold {
color: #007a5e;
font-weight:bold;
}
.boldwhite {
font-weight:bold;
}
/*Accordion Movement*/
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.accordion.js > .expanded > *:not(h1) {
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}
/*Section Properties*/
.sections {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #dddddd;
padding: 5px;
background-color: #FCFCFC;
border-radius: 1px;
}
.sections:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*Green Section Properties*/
.sections2 {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ccd6e0;
padding: 5px;
background-color:rgba(224, 235, 245,0.3);
border-radius: 1px;
}
.sections2:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.accordion > section > div {
margin-bottom: 15px;
}
<section class="accordion js"><section class="sections">
<h1>
<span style="font-size: 18px;">1</span></h1>
<div>
<br/>
<p id="p">One</p>
</div> </section>
<br style="line-height: 15px;"/><section class="sections2">
<h1>
<span style="font-size: 18px;">2</span></h1>
<div>
<br/>
<p id="p">Two</p>
</div>
</section>
You'll have to add <span class="chevrone"></span> to each h1, and include css, I've added below. Note, that no additional javascript needed.
Additional CSS
.accordion.js .chevrone {
position: absolute;
left: 30px;
}
.accordion.js > *:not(.expanded) .chevrone:before {
content: '+';
}
.accordion.js >.expanded .chevrone:before {
content: '-';
}
Modified snippet
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
/*All paragraphs*/
.p {
margin: 5px;
color: #007a5e;
}
.bold {
color: #007a5e;
font-weight:bold;
}
.boldwhite {
font-weight:bold;
}
/*Accordion Movement*/
.accordion h1 {
width:100%;
}
.accordion.js .chevrone {
position: absolute;
left: 30px;
}
.accordion.js > *:not(.expanded) .chevrone:before {
content: '+';
}
.accordion.js >.expanded .chevrone:before {
content: '-';
}
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.accordion.js > .expanded > *:not(h1) {
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}
/*Section Properties*/
.sections {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #dddddd;
padding: 5px;
background-color: #FCFCFC;
border-radius: 1px;
}
.sections:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*Green Section Properties*/
.sections2 {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ccd6e0;
padding: 5px;
background-color:rgba(224, 235, 245,0.3);
border-radius: 1px;
}
.sections2:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.accordion > section > div {
margin-bottom: 15px;
}
<section class="accordion js"><section class="sections">
<h1>
<span class="chevrone" ></span>
<span style="font-size: 18px;">1</span></h1>
<div>
<br/>
<p id="p">One</p>
</div> </section>
<br style="line-height: 15px;"/><section class="sections2">
<h1>
<span class="chevrone" ></span>
<span style="font-size: 18px;">2</span></h1>
<div>
<br/>
<p id="p">Two</p>
</div>
</section>
The code below is for an accordion list I have created using HTML, CSS and JavaScript. Is there any way add a plus and minus picture in the left corner of the heading? So when I clicked on heading "A" or "B" the picture goes from the plus sign to the minus sign. Here are the two images I would like to use:
https://www.independencecenter.org/wp-content/uploads/2014/04/wellness.png
https://web.archive.org/web/20150227045704/http://licensing.paperbagrecords.com/wp-content/themes/licensing/assets/images/minus.png
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
<style>
/*All paragraphs*/
.p {
margin: 5px;
color: #007a5e;
}
.bold {
color: #007a5e;
font-weight:bold;
}
.boldwhite {
font-weight:bold;
}
/*Accordion Movement*/
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.accordion.js > .expanded > *:not(h1) {
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}
/*Section Properties*/
.sections {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #dddddd;
padding: 5px;
background-color: #FCFCFC;
border-radius: 1px;
}
.sections:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*Green Section Properties*/
.sections2 {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ccd6e0;
padding: 5px;
background-color:rgba(224, 235, 245,0.3);
border-radius: 1px;
}
.sections2:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.accordion > section > div {
margin-bottom: 15px;
}
</style>
<section class="accordion js">
<section class="sections">
<h1><span style="font-size: 18px;">A</span></h1>
<div>
<p class="p" style="text-align: center;"><span style="color: #007a5e;">aerheahqeh.</span></p>
</div>
</section>
<br style="line-height: 15px;"/>
<section class="sections2">
<h1><span style="font-size: 18px;">B</span></h1>
<div>
<p class="p" style="text-align: center;">Twtjwrjwrj </p>
</div>
</section>
</section>
Use pseudo-elements on the child of your expanded class and a background image. Something like:
.accordion.js h1{
position:relative;
}
.accordion.js h1::before{
content: "";
display:block;
height:20px;
width:20px;
position:absolute;
left:0;
top:0;
background: url(YourPlusImageUrlHere);
}
.accordion.js .expanded h1::before{
background: url(YourMinusImageUrlHere);
}
Adjust for your styles.