I am trying to toggle content with icon,icon is changing when i click for plus sign but it is not changing for minus again.basically i want to add plus sign for all the panel which are not open.
here is js:
$(".toggle").click(function(e) {
$( this ).find('span').toggleClass( "accordion_icon_close accordion_icon_open" );
var $next=$(this).next().toggle(400);
$('.answer').not($next).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle " profile='1' id="plus">Toggle <span class="accordion_icon_open"></span></div>
<div class="answer" rel='profile_1'>Answer</div>
<div class="toggle" profile='2'>Toggle <span class="accordion_icon_open"></span></div>
<div class="answer" rel='profile_2'>Answer</div>
Check the answer, I use fa icons, since I don't have your icon set. and just add the class you want to replace inside toggleClass()
$(document).ready(function() {
$(".toggle").click(function(e) {
$(this).find('i').toggleClass("fa-minus");
var next = $(this).next().toggle(400);
$('.answer').not(next).hide(400);
$('.toggle').not(this).find('i').removeClass('fa-minus').addClass("fa-plus");
});
});
.answer {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="toggle " profile='1' id="plus">Toggle <i class="fa fa-plus"></i> </div>
<div class="answer" rel='profile_1'>Answer</div>
<div>
<div class="container">
<div class="toggle" profile='2'>Toggle <i class="fa fa-plus"></i></div>
<div class="answer" rel='profile_2'>Answer</div>
<div>
Related
I have coded a series of bootstrap collapsible Divs using the Javascript forEach function in an EJS file. These divs all have a button to expand and collapse the div. Initially, pressing on any button will expand all divs but I have managed to overcome that by indexing the IDs of those divs.
My problem now is I have a separate JS file running jQuery. The jQuery is used to hide and show specific font-awesome icons. When the div is collapsed, it shows an arrow-down icon and hides the arrow-up icon. When a div is expanded, it shows an arrow-up icon and hides the arrow-down icon. My jQuery when activated will apply the changes to all divs but I only want to apply it to the div that I clicked. I briefly recall I could use $(this) but haven't been able to find anything that could help me with it.
Please see my JS and EJS files below.
list.js
$('#collapsibleDivBtn').on('click', () => {
var downHiddenStatus = $(".fa-caret-square-down").is("[hidden]")
var upHiddenStatus=$(".fa-caret-square-up").is("[hidden]")
$(".fa-caret-square-down").toggleClass('hidden')
$(".fa-caret-square-down").attr('hidden',!downHiddenStatus)
$(".fa-caret-square-up").toggleClass('hidden')
$(".fa-caret-square-up").attr('hidden',!upHiddenStatus)
});
list.ejs
<!-- Start of the page -->
<div class="container mt-3">
<!-- Title of the page -->
<h3>List of Racks</h3>
<% data.forEach((rack, index) => { %>
<div class="card mb-3" >
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5 class="card-title"><strong><%= rack['Cabinet ID'] %></strong></h5>
</div>
<div>
<a id="collapsibleDivBtn" href="#collapsibleDiv<%= index %>" class="btn p-0" data-toggle="collapse">
<i class="far fa-caret-square-down text-primary bg-white"></i>
<i hidden class="hidden far fa-caret-square-up text-danger bg-white"></i>
</a>
</div>
</div>
<h6 class="card-subtitle mb-2 text-muted"><%= rack['Abbreviated Address'] %></h6>
<hr>
<div id="collapsibleDiv<%= index %>" class="collapse">
<div class="row mb-2">
<div class="col">
<p class="card-text">User Status: <br />
<span id="siteStatus" class="statusUpdate" ><%= rack['User Status'] %>
</span>
</p>
</div>
<div class="col">
<p class="card-text">Site Status: <br />
<span id="userStatus" class="statusUpdate">Online
</span>
</p>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<p class="mb-0">After Service Status: <br />
<span id="aft_service_status" class="statusUpdate">Unknown
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<% }); %>
</div>
No need for hiding elements. Just use CSS rotate for your icons.
$(".container").on("click", function(){
$(this).find("i").toggleClass("arrowUp");
});
.container{
width: 50px;
height: 50px;
font-size: 50px;
}
.container i{
transition: all 0.4s ease;
}
.arrowUp {
transform: rotateZ(-180deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div>
<a class="container">
<i class="fa fa-arrow-down"></i>
</a>
<a class="container">
<i class="fa fa-arrow-down"></i>
</a>
<a class="container">
<i class="fa fa-arrow-down"></i>
</a>
</div>
I'm trying to change the class of an html element i using jquery. What i'm trying to achieve is when the user clicks on div , I would like the CSS class of the i under the clicked div to change.
So far I'm unable to achieve this. Any tip will be appreciated.
$(document).ready(function() {
$('div.gen').click(function() {
$(this).next('span i').toggleClass('fa-angle-double-up fa-angle-double-down');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li>
<div class="gen"><span>
<div class="inline-block"> 👨
<figcaption>John</figcaption>
</div>
<i class=" stack-top box arrow bounce fa fa-angle-double-down" style="font-size:24px"></i>
<div class="inline-block"> 👩
<figcaption>Jane</figcaption>
</div>
</span>
</div>
</li>
<hr>
<li>
<div class="gen"><span>
<div class="inline-block"> 👨
<figcaption>John2</figcaption>
</div>
<i class=" stack-top box arrow bounce fa fa-angle-double-down" style="font-size:24px"></i>
<div class="inline-block"> 👩
<figcaption>Jane2</figcaption>
</div>
</span>
</div>
</li>
Thanks
The find method should do the trick instead of next since find traverses down the DOM
$(this).find('span i').toggleClass('fa-angle-double-up fa-angle-double-down');
You can use jQuery's find, as following:
$(document).ready(function() {
$('div.gen').click(function() {
$(this).find('span i').toggleClass('fa-angle-double-up fa-angle-double-down');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<li>
<div class="gen"><span>
<div class="inline-block"> 👨
<figcaption>John</figcaption>
</div>
<i class=" stack-top box arrow bounce fa fa-angle-double-down" style="font-size:24px"></i>
<div class="inline-block"> 👩
<figcaption>Jane</figcaption>
</div>
</span>
</div>
</li>
<hr>
<li>
<div class="gen"><span>
<div class="inline-block"> 👨
<figcaption>John2</figcaption>
</div>
<i class=" stack-top box arrow bounce fa fa-angle-double-down" style="font-size:24px"></i>
<div class="inline-block"> 👩
<figcaption>Jane2</figcaption>
</div>
</span>
</div>
</li>
I'm a little overtaxed right now. I want to copy the last div with the class .recipe-options-line and paste it behind the last div with the class .recipe-options-line. That works so far.
I have to make some changes to the element before inserting the div. How can I do that?
i want to delete any entries in the textarea that are present in the copied element.
i want to replace in the copied element the number in the textarea (name="recipeOptions[0][number]") by the content of the variable RecipeOptionNumber.
i want to replace in the copied element the last number of the data-limit-target="unique-10-1" and of the span id="unique-10-1" in the last div with the content of the variable RecipeOptionNumber, too.
Is that possible? Or do I have to look for another solution? Can someone help me?
HTML:
<div class="col-md-12" id="recipe-options-div">
<div class="recipe-options-line">
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
<textarea class="hide" name="recipeOptions[0][number]" rows="1"></textarea>
<i class="fa fa-dot-circle-o"><!-- icon --></i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
<textarea class="hide" name="recipeOptions[0][unit]" rows="1"></textarea>
<i class="fa fa-dot-circle-o"><!-- icon --></i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-6">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
<textarea class="hide" name="recipeOptions[0][name]" rows="1"></textarea>
<textarea data-limit-target="unique-10-1" class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
<i class="fa fa-comment"><!-- icon --></i>
<span id="unique-10-1" class="maximum-limit"></span>
</div>
</div>
</div>
</div>
<div class="text-center mb-15">
<a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption"><i class="glyphicon glyphicon-plus"></i>option</a>
</div>
JS:
var RecipeOptionNumber = 2;
$(document).on("click", "#addRecipeOption", function () {
$(".recipe-options-line:last").clone().insertAfter("div.recipe-options-line:last");
RecipeOptionNumber ++;
});
Is that possible? Or do I have to look for another solution? Can someone help me?
Yes, of course it's possible! A good solution here would be to create a blank template for recipe options and a re-usable function to add them programmatically. See example below with comments:
$(function() {
var recipeOptionsDiv = $("#recipe-options-div");
var RecipeOptionNumber = 0;
// Re-usable function to add recipe options
function addRecipeOption() {
// A blank recipe <div>
var newRecipe = $("#recipe-template-wrapper .recipe-options-line").clone();
// Iterate through each [data-recipe] element and set its [name] attribute accordingly
newRecipe.find("[data-recipe]").each(function() {
var recipeOption = $(this).attr("data-recipe");
$(this).attr("name", "recipeOptions[" + RecipeOptionNumber + "][" + recipeOption + "]");
});
// Set [data-limit-target] to RecipeOptionNumber + 1
newRecipe.find("[data-limit-target]").attr("data-limit-target", "unique-10-" + (RecipeOptionNumber + 1));
// Insert the new HTML
recipeOptionsDiv.append(newRecipe);
// Increment recipe counter
RecipeOptionNumber++;
}
// Add click event listener for Add Option button
$("#addRecipeOption").click(addRecipeOption);
// Add the first recipe option on page load
addRecipeOption();
});
#addRecipeOption {
background-color: tomato;
cursor: pointer;
display: table;
margin-bottom: 5px;
margin-top: 10px;
min-width: 100px;
padding: 10px;
text-align: center;
}
#recipe-template-wrapper {
display: none;
}
.recipe-options-line {
border-bottom: 1px solid;
margin-bottom: 15px;
padding-bottom: 10px;
}
<!-- Add option button -->
<div class="text-center mb-15">
<a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption">
<i class="glyphicon glyphicon-plus"></i>option
</a>
</div>
<!-- Recipe option divs will be appended here -->
<div class="col-md-12" id="recipe-options-div"></div>
<!--
Hidden recipe option template HTML
Elements' custom data-* attributes will be used to set their name attributes
-->
<div id="recipe-template-wrapper">
<div class="recipe-options-line">
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
<textarea class="hide" data-recipe="number" rows="1"></textarea>
<i class="fa fa-dot-circle-o">
<!-- icon -->
</i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
<textarea class="hide" data-recipe="unit" rows="1"></textarea>
<i class="fa fa-dot-circle-o">
<!-- icon -->
</i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-6">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
<textarea class="hide" data-recipe="name" rows="1"></textarea>
<textarea data-limit-target class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
<i class="fa fa-comment">
<!-- icon -->
</i>
<span id="unique-10-1" class="maximum-limit"></span>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Well your are missunderstanding th concept och memory.
When you clon the items. make change to it before insertit
Example.
$("button").click(function(){
var inputCloned = $("input").last().clone();
// make changes
inputCloned.val("input nr " + $("input").length)
// add the cloned input to the body
$("body").append(inputCloned)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Clone last item</button>
<input type="text" />
I'm using a third party plugin for the color picker compatible with bootstrap, this picker field added in a repeater so I can add rows and remove as I can
I initiate the plugin like the following
$('.color-picker').minicolors();
$(".mt-repeater").repeater();
but the color picker field not work for the added rows, it only works for the first row.
check the demo on codepen try to click on add row button then on the color picker https://codepen.io/anon/pen/ZexeYj
how can I deal with this issue? when I try to call the minicolors again after adding new row something went wrong.
but the color picker field not work for the added rows, it only works for the first row.
That happens because the color picker is partially initialized on next rows....
According to jquery.repeater documentation you must handle the show option callback:
$(".mt-repeater").repeater({
show: function () {
$(this).find('.color-picker').minicolors('destroy').minicolors();
$(this).show(); // or $(this).slideDown();
}
});
In this method you can destroy the current minicolors and initialize a new one.
Working snippet:
$('.color-picker').minicolors();
$(".mt-repeater").repeater({
show: function () {
$(this).find('.color-picker').minicolors('destroy').minicolors();
$(this).show();
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div class="form-group mt-repeater">
<div class="col-sm-4">
<div data-repeater-list="group-c">
<div data-repeater-item class="mt-repeater-item">
<div class="row mt-repeater-row">
<div class="col-md-5">
<input type="text" placeholder="" class="form-control"/>
</div>
<div class="col-md-2">
<input type="hidden" class="form-control color-picker" value="#db913d">
</div>
<div class="col-md-3">
<input type="text" class="form-control icons-picker">
</div>
<div class="col-md-2">
<a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete">X
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3">
<a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add">
<i class="fa fa-plus fa-fw fa-lg"></i> Add row</a>
</div>
</div>
Another approach is setting initEmpty option to true:
start with an empty list of repeaters. Set your first (and only)
"data-repeater-item" with style="display:none;" and pass the
following configuration flag
The snippet:
$(".mt-repeater").repeater({
initEmpty: true,
show: function () {
$(this).find('.color-picker').minicolors();
$(this).slideDown();
}
});
// create the first group
$('[data-repeater-create]').trigger('click');
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<div class="form-group mt-repeater">
<div class="col-sm-4">
<div data-repeater-list="group-c">
<div data-repeater-item class="mt-repeater-item" style="display:none;">
<div class="row mt-repeater-row">
<div class="col-md-5">
<input type="text" placeholder="" class="form-control"/>
</div>
<div class="col-md-2">
<input type="hidden" class="form-control color-picker" value="#db913d">
</div>
<div class="col-md-3">
<input type="text" class="form-control icons-picker">
</div>
<div class="col-md-2">
<a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete">X
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3">
<a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add">
<i class="fa fa-plus fa-fw fa-lg"></i> Add row</a>
</div>
</div>
I need to dynamically display the accordance with the check box using bootstrap. When i click the parent check box , then my child boxes are not clicked. with static loading i can able to check it but when i keep the accordance code in JavaScript and run it when button is clicked I am unable to click the child check-boxes .
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<script>
function getAccordiance()
{
var html ='';
html+='<div class="box-body subjectareaComparsion"> <div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading">';
html+='<h4 class="panel-title"><input type="checkbox" id="chckHead" class="chckHead" value="subject1"/>';
html+='<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Sample1</a></h4> </div><div id="collapseOne" class="panel-collapse collapse in">';
html+=' <div class="panel-body"><table class="table table-striped"><tr><td><div class="checkbox"> <input type="checkbox" id="checkbox" class="chcktbl" />';
html+='<label for="checkbox">List group item heading</label></div></td></tr> </table></div> </div></div> <div class="panel panel-default">';
html+='<div class="panel-heading"> <h4 class="panel-title"><input type="checkbox" id="chckHead" class="chckHead" value="subject2"/>';
html+='<a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"> Sample2</a></h4></div><div id="collapsetwo" class="panel-collapse collapse">';
html+='<div class="panel-body"><table class="table table-striped"><tr> <td> <div class="checkbox"><input type="checkbox" id="checkbox" class="chcktbl" />';
html+='<label for="checkbox">List group item heading</label> </div></td></tr> </table> </div></div> </div></div> </div>';
$('#dataload').html(html);
}
</script>
</head>
<body class="skin-blue">
<header class="header"> <a href="index.html" class="logo">
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Sample</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row ">
<!-- left column -->
<div class="col-md-6">
<!-- Subject Area -->
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title"> Area</h3>
</div>
<button onclick="getAccordiance()">Submit</button>
<div id="dataload"></div>
</div>
</div>
</div>
</section>
<!-- /.content -->
</aside>
<!-- /.right-side -->
</div>
<!-- ./wrapper -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.chckHead').on('click',function () {
alert("Hi");
$(this).closest('.panel').find(".chcktbl").prop('checked', $(this).prop('checked'));
});
</script>
</body>
</html>
You need to delegate the click event as the checkboxes are dynamically generated.More on delegate
$(document).on('click', '.chckHead', function () {
alert("Hi");
$(this).closest('.panel').find(".chcktbl").prop('checked', $(this).prop('checked'));
});
Demo Fiddle
Demo Here: http://jsfiddle.net/m3o7u7Lm/2/ (built off of your demo in your comments)
$('.childCheckBox').on('click', function() {
// do stuff here
});
The .on('click', function() {}) takes into dynamically added elements to the dom.
Also, it would be easier for you if you built a template and then cloned like this (also shown in the demo) instead of using jquery to build the html:
<div class="content">
<fieldset id="template">
<label><input type="checkbox" class="parentCheckBox">Parent</input></label>
<label><input type="checkbox" class="childCheckBox">Child 1</input></label>
<label><input type="checkbox" class="childCheckBox">Child 2</input></label>
</fieldset>
</div>
Add Another
$('.add').on('click', function(event) {
event.preventDefault();
$('#template').clone(true).attr('id', '').appendTo('.content');
});
hope this helps!