function togchq3chn(x) {
for (i = 1; i < 10; i++) {
var k = "kd" + i;
var c = "cd" + i;
if (x.id == k) {
document.getElementById(c).style.display = "block";
}
}
}
.chqsqr {
width: 25px;
height: 25px;
border: 1px solid rgb(180, 180, 180);
border-radius: 2px;
}
.shcursor {
cursor: pointer;
}
.inlineblock {
display: inline-block !important;
}
.bluefont {
color: rgb(0, 98, 167) !important;
}
.f17 {
font-size: 1.7em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd1" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd1" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd2" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd2" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd3" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd3" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
</body>
</html>
Once i click on the check box it get selected but if i again click on the same check box the yes tick is not getting disabled.
I try that else section else{document.getElementById(c).style.display = "none";} but when i do this code. at time one checkbox i can get selected. this will work like a toggled.
Requirement: On the checkbox if i click again the yes tick will get respective checkbox yest tick disappeared.
You don't need to give one unique ID to each <div> and to each <i>. You don't need to loop 10 times on click, generate IDs, test if each ID matches the element you clicked, then show/hide another element with a composed ID.
What you are trying to do can be done with a simple toggle() on click. (And one jQuery!)
$(".chqsqr").click(function() {
$(this).find("i").toggle()
});
.chqsqr {
width: 25px;
height: 25px;
border: 1px solid rgb(180, 180, 180);
border-radius: 2px;
}
.shcursor {
cursor: pointer;
}
.inlineblock {
display: inline-block !important;
}
.bluefont {
color: rgb(0, 98, 167) !important;
}
.f17 {
font-size: 1.7em !important;
}
i.fas {
position: relative;
display: none;
top: -2px;
left: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock">
<i class="fas fa-check"></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock">
<i class="fas fa-check"></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd3">
<i class="fas fa-check" ></i>
</div>
</div>
If I understood your question then you wanted something like this?
function clickFunction(prop){
var nameProp = document.getElementsByName(prop.name);
var idProp = document.getElementById(prop.id);
if (idProp.checked) {
for(var i=0; i < nameProp.length; i++){
nameProp[i].disabled = false;
}
}
}
<tr><td><input type="checkbox" name="box" id="box1" value="1" tabIndex="1" onClick="clickFunction(this)">Test 1</td></tr>
<tr><td><input type="checkbox" name="box" id="box2" value="1" tabIndex="1" onClick="clickFunction(this)">Test 2</td></tr>
<tr><td><input type="checkbox" name="box" id="box3" value="1" tabIndex="1" onClick="clickFunction(this)">Test 3</td></tr>
Related
i want to create a chat and i have been working on it.
here is the code below
<!DOCTYPE html>
<html>
<head>
<title>Aswin's Good Apps</title>
<!-- add icon link -->
<link rel = "icon" href =
"https://goodapps.w3spaces.com/AswinIcon.png"
type = "image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<style>
body{
background-color:pink;
color:purple;
font: 15px Arial, sans-serif;
}
#media screen and (max-width: 300px) {
body{
width: 100%;
}
}
.
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for all buttons */
button {
background-color: purple;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.cancelbtn {
padding: 14px 20px;
background-color: #8B0000;
}
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
.signupbtn{
background-color:#013220;
}
.container {
padding: 20px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #0000ffff;
padding-top: 50px;
}
.modal-content {
background-color: #ff8c00;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
}
hr {
border: 1px solid blue;
margin-bottom: 25px;
}
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: white;
}
.close:hover,
.close:focus {
color: purple;
cursor: pointer;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
a{
font-size:25px;
color:purple;
text-decoration:none;
font-size:50px;
}
h2{
font-size:50px;
background-color: pink;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 12px;
}
#loading {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
text-align: center;
color:green;
background-color:yellow;
top: calc(50% - 30px);
left: calc(50% - 45px);
text-align: center;
font-weight: bold;
}
div.sticky1 {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 12px;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 130px;
height: 130px;
margin: -76px 0 0 -76px;
border: 16px solid greenyellow;
border-radius: 60%;
border-top: 16px solid yellow;
border-radius:60%;
border-bottom: 16px solid yellow;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
}
ul{
list-style: none;
}
p{
font-size: 25px;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="body">
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
document.getElementById('fail').style.display='none';
document.getElementById('goonthetrack').style.display='none';//
let messages = localStorage.getItem('message');
console.log(messages);
document.getElementById('result').innerHTML = messages;
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("loading").style.display="none";
}
//this will filter the results to which they have searched far
function searchresult(){
//this line tells the html tags we have used
var input, filter, ul, li, a, i, txtValue;
//this collects the inputs id
input = document.getElementById("mysearch");
//this tells about the filter
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
function validate()
{
if( document.getElementById("text1").value == "aswin.arulvel#gmail.com"
&& document.getElementById("text2").value == "aswinwebsitepass" )
{
document.getElementById("p1").innerHTML = "Hello Aswin";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if( document.getElementById("text1").value == "sathya.arulvel#gmail.com"
&& document.getElementById("text2").value == "sathyasaccount01" )
{
document.getElementById("p1").innerHTML = "Hello Sathya!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if(document.getElementById("text1").value == "arulvel.kumarasamy#gmail.com"
&& document.getElementById("text2").value == "skar$SP50zxcvArulaccount")
{
document.getElementById("p1").innerHTML = "Hello Arulvel!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("signup2").style.display = "none" ;
document.getElementById("login1").style.display = "none" ;
}
else if(document.getElementById("text1").value == "mine#3478"
&& document.getElementById("text2").value == "mine#3478")
{
document.getElementById("p1").innerHTML = "Hello Shreyan!";
document.getElementById('goonthetrack').style.display='block';
document.getElementById("login1").style.display = "none" ;
document.getElementById("signup2").style.display = "none" ;
}
else
{
alert( "validation failed" );
document.getElementById("fail").style.display = "block" ;
}
}
function addmessaage()
{
let li = document.createElement("li");
let li2 = li.classname = "li2";
let textToChange = document.getElementById('chatmessage').value;
let t= document.createTextNode(textToChange);
li.appendChild(t);
document.getElementById('result').appendChild(li);
document.getElementById('chatmessage').value ="";
var multisave = document.getElementById('result').value;
for (i = 0 ; i < li2.length; i++) {
li2[i].onclick = function() {
var div = this.parentElement;
}
}
localStorage.setItem("message", textToChange);
}
</script>
<a href="goodapps.w3spaces.com/fractionscalc.html">We just put fraction calculer! Explore it!
<div class="container mt-3" style="background-color:pink; text-align:left;">
<div class="sticky">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<p id="p1">Not logged in</p>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" style="font-size:20px;"> <i class="fa fa-home"></i>Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="login1" data-toggle="tab" href="#login" style="font-size:20px;"><i class="fa fa-sign-in"></i>Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" id="signup2" data-toggle="tab" href="#menu3" style="font-size:20px;"> <i class="fa fa-user-plus" aria-hidden="true"></i>Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" style="font-size:20px;"><i class="fa fa-database" aria-hidden="true"></i>Good Apps</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu4" style="font-size:20px;"><i class="fa fa-comment" aria-hidden="true"></i>Chat</a>
</li>
<iframe style="text-align:right;"width="145" height="102" src="https://goodapps.w3spaces.com/dateaswin.html" style="float:right; text-decoration: none; margin-right: 100px;">
</iframe>
</div>
</li>
</ul>
</div>
<!-- Tab panes -->
<div style="background-color:pink;"class="tab-content">
<div id="home" class="container tab-pane active"><br>
<i class="fa fa-home" style="font-size:50px;"></i><h3><i class="fa-duotone fa-house"></i>HOME</h3>
<img src="https://goodapps.w3spaces.com/AswinIcon.png"/ width="200" height="360px">
<p>Welcome to Aswin.</p>
<a class="nav-link" data-toggle="tab" href="#login" style="font-size:20px;">Login</a>
<a class="nav-link" data-toggle="tab" href="#menu3" style="font-size:20px;"> Sign Up</a>
</div>
<div id="login" class="container tab-pane fade"><br>
<i class="fa fa-sign-in" style="font-size:50px;"> </i></i><h3>Login</h3>
<p>Log in to save your work and have a more personalized experience.</p>
<form action="#home">
<input type="text" style = "width:15%;"class="form-control" placeholder="Username" id="text1" />
<input type="password" class="form-control" placeholder="Password" id="text2" style="width:15%;"/>
<input type="button" value="Login" class="btn btn-info" onclick="javascript:validate()" />
</form>
<div class="alert alert-danger" id="fail">
<p>Incorrect username or password.</p>
</div>
<div class="alert alert-success" id="goonthetrack">
<p>You have succesfuly logged in.</p>
</div>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Good Apps</h3>
<p>These are all good apps and have a lot of helpful info and all that stuff Items that are tagged "Under Development" are not finished and may have issues.</p>
<input type="search" id="mysearch" placeholder="Search Apps..." style="margin-top: 8px;
padding: 14px;
float: right; " onkeyup="searchresult()"
>
<ul id="myUL">
<li> Aswin's Tutorials</li>
<br>
<br>
<li>Aswin's Stories</li>
<br>
<br>
<li>Aswin's Sentences</li>
<br>
<br>
<li>Aswin's Games</li>
<br>
<br>
<li> Aswin's Calculater</li>
<br>
<br>
<li>Aswin's Writer</li>
<br>
<br>
<li>Aswin's Code Editor</li>
<br>
<br>
<li> Aswin's Dictonary</li>
<br>
<br>
<li> Aswin's Galaxy Director (under devolopment)
</li><br>
<br>
<li> Aswin's Star Collage(under devolopment)
</li><br>
<br>
<li> Aswin's Facts(under devolopment)</li>
</ul>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<i class="fa fa-user-plus" style="font-size:50px;" aria-hidden="true"></i><h3>Sign UP</h3>
<form action="#home">
<p>Enter your email:</p>
<input type="email" class="form-control" required>
<p>Set a password:</p>
<input type="password" class="form-control" required>
<p>Repeat Password:</p>
<input type="password" class="form-control" required>
<input type="checkbox" class="form-control" required style="text-align:left;" name="I agree to the terms of service." id="agree" value="I agree to the terms of service."/><p>By signing up, I agree to the terms of service.</p>
<input type="submit" class="form-control" value="Sign Up">
</form>
</div>
<div id="menu4" class="container tab-pane fade"><br>
<i class="fa fa-comment" style="font-size:50px;" aria-hidden="true"></i><h3>chat</h3>
<form action="#home">
<ul id="result" style="font-size:50px; display: inline-block;overflow:auto; height:150px;" class="form-control">
</ul>
<input type="text" id="chatmessage" class="form-control">
<input type="button" value="Send" onclick="addmessaage()" id="save" class="btn btn-success">
</form>
</div>
</div>
<div class="sticky">
</iframe>
</div>
</div>
</div>
<div id="loader"></div><p id="loading">Loading...</p>
</div>
</body>
</html>
i want to save the elements that the js has been created.
i want to use client-side javascript and use localstorage().
issue is i can't save multiple messages.
go to the chat section and make the snippet full screen
please help me
Problem
Once the input is entered in the input field, and the check button is clicked, the input element gets converted into a span element and the check icon gets converted into an edit icon.
I want that when someone clicks on the edit icon, the span element gets converted into the input element again.
const container = document.querySelector(".container");
// Creating a SPAN element and appending it to div
container.addEventListener("click", (e) => {
const tgt = e.target.closest(".icons");
if (tgt) {
if (tgt.classList.contains("swapped")) return; // stop
if (tgt.classList.contains("check-icon")) {
tgt.classList.add("swapped");
let texts = document.querySelectorAll(".text");
let items = document.querySelectorAll(".items");
texts.forEach((text, i) => {
let span = document.createElement("span");
let val = document.createTextNode(text.value ? text.value : "");
span.appendChild(val);
span.classList.add("text2");
items[i].appendChild(span);
if (text.value) text.value = ""; // setting the input value to empty once clicked onto the check button
text.parentNode.replaceChild(span, text);
let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
if (tgt.classList.contains("check-icon")) {
Array.from(btns).forEach((ele) => {
ele.classList.toggle("hidden");
});
}
});
}
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
</div>
<div class="check-icon icons mainicon">
<i class="fa fa-check " aria-hidden="true"></i>
</div>
<div class="edit-icon icons hidden mainicon">
<i class="far fa-edit " aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
Js Fiddle
In your js file.
Modify the check-icon help block a bit, add the following code in the loop of btns.
if (ele.classList.contains("check-icon")) {
ele.classList.remove("swapped");
}
Adding this additional if block will help.
if (tgt.classList.contains("edit-icon")) {
let texts = document.querySelectorAll(".text2");
let items = document.querySelectorAll(".items");
texts.forEach((text, i) => {
let input = document.createElement("input");
input.value = text.textContent;
input.classList.add("text");
items[i].appendChild(input);
text.parentNode.replaceChild(input, text);
let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
Array.from(btns).forEach((ele) => {
ele.classList.toggle("hidden");
if (ele.classList.contains("check-icon")) {
ele.classList.remove("swapped");
}
});
});
}
jsFiddel link
Created a span element next to inputs, hidden by default.
Created 2 different click events for edit and check buttons.
On click one element type is made hidden and the other looses its hidden class.
Did not work on styling so you may want to do that yourself.
Also it's better to change .span class to something appropriate.
Khalil's suggestion about making inputs disabled sound good, too.
const container = document.querySelector(".container");
const editIcon = document.querySelector(".edit-icon");
const checkIcon = document.querySelector(".check-icon");
const inputs = [...container.querySelectorAll('.text')]
const spans = [...container.querySelectorAll('.span')]
editIcon.addEventListener('click', () => {
spans.forEach((el, i) => {
el.classList.add('hidden');
inputs[i].classList.remove('hidden');
})
editIcon.classList.add('hidden');
checkIcon.classList.remove('hidden');
})
checkIcon.addEventListener('click', () => {
inputs.forEach((el, i) => {
spans[i].textContent = el.value;
el.classList.add('hidden');
spans[i].classList.remove('hidden');
})
checkIcon.classList.add('hidden');
editIcon.classList.remove('hidden');
})
.mainContainer {
height: 400px;
width: 900px;
background-color: white;
margin: 200px auto;
border: 5px solid black;
border-radius: 8px;
}
.heading {
font-family: "Roboto", sans-serif;
font-weight: bold;
text-align: center;
position: relative;
top: 15px;
}
.container {
width: 800px;
height: auto;
border: 2px solid black;
display: grid;
grid-template-columns: 230px 230px 230px 50px 50px 50px;
align-items: center;
margin: auto;
position: relative;
top: 30px;
padding: 10px;
background-color: #007bff;
}
.items {
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;
font-weight: bold;
color: #fff;
}
.text {
width: 130px;
}
.icons {
font-size: 18px;
border: 2px solid #fff;
margin-left: 12px;
color: #007bff;
cursor: pointer;
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.icons:hover {
color: #fff;
background-color: #007bff;
}
.hidden {
display: none;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body style="background-color: #007bff">
<div class="mainContainer">
<h1 class="heading">Details Collector</h1>
<div class="container">
<div class="items">
<label class="label" for="Name">Name :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="items">
<label class="label" for="State">State :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="items">
<label class="label" for="Country">Country :</label>
<input class="text" type="text" />
<span class="span hidden"></span>
</div>
<div class="check-icon icons mainicon">
<i class="fa fa-check " aria-hidden="true"></i>
</div>
<div class="edit-icon icons hidden mainicon">
<i class="far fa-edit " aria-hidden="true"></i>
</div>
<div class="plus-icon icons ">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>
what I try is to have a simple Accordion that changes it text before you open it, it displays show credits and when it's open the text should change to close credits does someone knows how to do it? saw it on some sites and I wonder how to do it in jquery
<!-- credits -->
<div class="credits">
<a class="show-credits" data-toggle="collapse" href="#credits" role="button"
aria-expanded="false" aria-controls="collapseExample">
Show Credits
</a>
<div class="collapse" id="credits">
<div class="card card-body">
<div class="credits-body">Credits text .....
</div>
</div>
</div>
</div>
<!-- /. credits -->
Thanks!
Here is an example of what you wish to do
https://codepen.io/wadleo/pen/mzMgpL
I used bootstrap and listen to its events on accordion open and close with jquery. Have fun.
https://codepen.io/wadleo/pen/mzMgpL
$(function() {
$("#paperback").on("hide.bs.collapse", function(){
$(".pp-but").html('Paperback Close <span class="pull-right"><i class="fa fa-plus"></i></span>');
});
$("#paperback").on("show.bs.collapse", function(){
$(".pp-but").html('Paperback Open <span class="pull-right"><i class="fa fa-minus"></i></span>');
});
});
span, p {
line-height: 1.2;
font-family: Perpetua, sans-serif!important;
}
a {
color: black;
font-size: 15px;
font-family: Perpetua, sans-serif!important;
}
a:hover {
text-decoration: none;
}
.btn-theme {
padding: 10px 20px;
font-size: 15px;
background: white;
border-radius: 0px;
border: solid 2px #FF7F50;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
}
.btn-theme:hover {
background-color: #FF7F50;
color: white;
}
.book-adds {
margin-top: 5%;
}
.book-adds span {
width: 50%;
}
.book-adds-cont {
width: 200px;
height: 35px;
padding: 8px;
display: block;
border-radius: 5px;
margin-bottom: 5%;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<div class="col-xs-6 book-adds">
<span type="button" class="pp-but" data-toggle="collapse" data-target="#paperback">Paperback Close <span class="pull-right"><i class="fa fa-plus"></i></span>
</span>
<br>
<span id="paperback" class="collapse">
<a class="btn btn-theme" href="">Buy</a>
</span>
<br>
</div>
You can use accordionbeforeactivate event as:
$( "#accordion" ).on( "accordionbeforeactivate", function( event, ui ) {
//
} );
Below you can find a simple demo:
$(function(){
$( "#accordion" ).accordion();
$( "#accordion" ).on( "accordionbeforeactivate", function( event, ui ) {
var oldHeaderText = ui.oldHeader.text()
var newHeaderText = ui.newHeader.text()
ui.oldHeader.text(oldHeaderText.replace(' - Open', ''));
ui.newHeader.text(newHeaderText + ' - Open');
} );
});
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="accordion">
<h3>Section 1 - Open</h3>
<div>
<p>
Paragraph 1
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Paragraph 2
</p>
</div>
</div>
</body>
</html>
Im triying to make this box 1:1 with css, but I have so low css skills. Picture of the box -> http://prntscr.com/l6kyob (left - when checkbox clicked, right - when its not), live demo here -> https://victorthemes.com/themes/glazov/gallery/photography-trend/
That's what I've done so far
jQuery(document).ready(function($){
$(".image-checkbox").each(function () {
if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
$(this).addClass('image-checkbox-checked');
}
else {
$(this).removeClass('image-checkbox-checked');
}
});
$(".image-checkbox").on("click", function (e) {
$(this).toggleClass('image-checkbox-checked');
var $checkbox = $(this).find('input[type="checkbox"]');
$checkbox.prop("checked",!$checkbox.prop("checked"))
e.preventDefault();
});
});
.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.image-checkbox input[type="checkbox"] {
display: none;
}
.image-checkbox-checked {
border-color: #4783B0;
}
.image-checkbox .fa {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.image-checkbox-checked .fa {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="usergalleryimages[]" value="">
<i class="fa fa-check hidden"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<label class="image-checkbox">
<img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
<input type="checkbox" name="usergalleryimages[]" value="">
<i class="fa fa-check hidden"></i>
</label>
</div>
Please, give me some hints how I can do this.
Thank you!!!
<input id='chk0' type='checkbox'> <label for="chk0"></label>
For CSS, input/label pairs do the following:
Tags
Place the checkbox before the label
Place anything that changes "state" (ex. off/on) after or within the label
Attributes
Assign #id to checkbox and a .class that is shared by all checkboxes
Assign for to label with the value of checkbox #id
CSS
Use the adjacent sibling combinator and the pseudo-class :checked like so:
.classOfCheckbox:checked + label .fa-check {
display: block;
}
.classOfCheckbox:checked + label .fa-times {
display: none;
}
Demo
.nopad {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
cursor: pointer;
box-sizing: border-box;
border: 4px solid transparent;
margin-bottom: 0;
outline: 0;
}
.chk {
display: none;
}
.chk:checked+.image-checkbox {
border-color: #4783B0;
}
.image-checkbox .fas {
position: absolute;
color: #4A79A3;
background-color: #fff;
padding: 10px;
top: 0;
right: 0;
}
.fa-check {
display: none;
}
.chk:checked+.image-checkbox .fa-check {
display: block !important;
}
.chk:checked+.image-checkbox .fa-times {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<input id="chk0" class="chk" type="checkbox" name="usergalleryimages[]" value="">
<label class="image-checkbox" for="chk0">
<img class="img-responsive" src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/Proofing-three.jpg" />
<i class="fas fa-check"></i>
<i class="fas fa-times"></i>
</label>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
<input id="chk1" class="chk" type="checkbox" name="usergalleryimages[]" value="">
<label class="image-checkbox" for="chk1">
<img class="img-responsive" src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/11/G-Proofing-six.jpg" />
<i class="fas fa-check"></i>
<i class="fas fa-times"></i>
</label>
</div>
I have 3 radio buttons that are tied to a function that supposed to change an image inside a div when each button is checked. It's working ok but when I adding CSS style to it so the actual checker won't be visible to only the icons I set will show, it'makes it uncheckable.
Note: when I remove the #sm-jum-btns input CSS and the checkers actually visible the code working. I need it to work also when those checkers are hidden and designed.
HTML:
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
</head>
<div class="jumbotron text-center" id="main-jum">
<img id="jum-img" src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
</div>
<div class="container-fluid text-center d-md-none" id="sm-jum-btns">
<input id="radio_left" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
<input id="radio_middle" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
<input id="radio_right" type="radio" name="optradio" onclick="changeImg()">
<label id="btn-left"class="radio-inline sm-jum-btn ">
<span class="fa fa-layers fa-fw fa-circle-thin">
<i class="fa fa-circle"></i>
</span>
</label>
</div>
<script type="text/javascript">
function changeImg(){
var jumImg = document.getElementById("jum-img");
var radioLeft = document.getElementById("radio_left");
var radioRight = document.getElementById("radio_right");
var radioMiddle = document.getElementById("radio_middle");
if (radioLeft.checked){
jumImg.src = "https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg";
}
if (radioRight.checked){
jumImg.src = "https://images7.alphacoders.com/411/thumb-1920-411820.jpg";
}
if (radioMiddle.checked){
jumImg.src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg";
}
}
</script>
CSS:
#sm-jum-btns input {
margin:0;
padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
margin-top: 180px;
}
#sm-jum-btn {
position: relative;
}
.fa-circle-thin {
color: #ffb300;
width: 50px;
height: 50px;
font-size: 50px;
font-weight: bold;
}
.fa-circle-thin::before {
position: absolute;
padding: 3.5px;
margin-top:3.5px;
}
.fa-circle {
color: #ffb300;
width: 50px;
height: 50px;
line-height: 50px;
border-radius:50px;
font-size: 30px;
}
.fa-circle-thin:hover {
color: #37100B;
}
#main-jum {
padding: 0;
}
#main-jum img {
width: 100%;
min-height: 400px;
object-fit:cover;
}
Ok after two days of searching and asking I figure it out thanks to this answer.
Basically I should add a for attribute in each label to point it to it's parent input id so it can actually check the input and trigger the function.
more about for attribute you can find here