At first Please see the screenshot , here i am working on Accordion text Editor, where you can add title and body text.
when i clicked ADD button multiple time then showing like this type. Not showing the title text. i thing it's problem on JS file. Does any solution??
Thanks in Advance!
$(document).ready(function() {
$('#Add_btn').click(function(){
$('#accordion_body').append($('#editableDiv').html());
var x = document.getElementById("accordion_input").value;
document.getElementById("accordion_title").innerHTML = x;
});
});
function myAccorFunction() {
var Myaccordion = `
<div class="Myacc" id="acc_main" contenteditable="false"
class="accordion-main"
style="position: relative;width: 98.5%; left: 9px;">
</div>
<div class="panel-group trash_removed" id="accordion" role="tablist"
aria-multiselectable="true"
style="margin-bottom: 7px;margin-top: 10px"
contenteditable="false">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne"
contenteditable="false">
<h4 class="panel-title">
<a id="accordion_title" role="button" data-toggle="collapse"
data-parent="#accordion" href="#expandingCol"
aria-expanded="false" aria-controls="collapseOne">
</a><div class="icon_area">
<i class="fa fa-edit" data-toggle="collapse"
data-parent="#accordion" href="#collapseOne"
aria-expanded="false" aria-controls="collapseOne">
</i>
<i onclick="myfundelete()" class="fa fa-trash">
</i>
</div>
</h4>
</div>
<div id="expandingCol" class="panel-collapse collapse"
role="tabpanel" aria-labelledby="headingOne">
<div id="accordion_body" class="panel-body" >
</div>
</div>
</div>
</div>
`;
$("#editor").append(Myaccordion);
}
<button onclick="myAccorFunction()" id="Add_btn"
class="btn btn-primary note-image-btn" role="button"
data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">Add</button>
It appears you are using the same element ID #accordion_title more than once. As browsers assume element ID is unique within a page, document.getElementById("accordion_title").innerHTML = x; will only change the innerHTML of the first element having that ID, but not the subsequent ones that were appended by the ADD button.
Try using a Class name instead of ID for your title text element, then iterate over every element of that class to change their innerHTML.
$('.accordion_title').each(function() {
$(this).html($('#accordion_input').val());
});
Related
I wrote some JavaScript and tried to replace the class whenever the aria-expanded element is true or false but nothing seems to be happening
The first card is open when the page loads because the aria-expanded ="true".
I want to find a way to replace the class in whenever the value of the aria-expanded element is changed. I'm new to jQuery and webdev so all of your help is appreciated.
Edit-I used bootstrap accordion to make sure only one can be open at a time
<div id="headingOne">
<h5 class="card-title">
Or Files
<a data-toggle="collapse" class="float-right" href="#collapseFiles"
role="button" aria-expanded="true" data-target="#collapseFiles"
aria-controls="collapseNotes">
<i class="fas fa-angle-up></i>
</a>
</h5>
</div>
<div id="headingTwo">
<h5 class="card-title">
Or Notes
<a data-toggle="collapse" class="float-right" href="#collapseNotes" role="button" aria-expanded="false" data-target="#collapseNotes" aria-controls="collapseNotes">
<i class="fas fa-angle-down"></i>
</a>
</h5>
</div>
<div id="headingThree">
<h5 class="card-title">
Or Names
<a data-toggle="collapse" class="float-right" href="#collapseNames" role="button" aria-expanded="false" data-target="#collapseNames" aria-controls="collapseNotes">
<i class="fas fa-angle-down"></i>
</a>
</h5>
</div>
and this is the jquery.
if ($('a').attr('aria-expanded').val() == 'true') {
$("a i").attr("class", "fa-angle-down");
} else {
$("a i").attr("class", "fa-angle-up");
}
I know you might want to do it using JavaScript, but I have a pure CSS way to do it:
HTML
I removed all unnecessary attributes on the anchor tag. I also removed fa-angle-down on the icon. The icon state will be set via CSS.
<div id="headingOne">
<h5 class="card-title">
Or Files
<a data-toggle="collapse" class="float-right" data-target="#collapseFiles">
<i class="fas"></i>
</a>
</h5>
<div class="card-body">
<p id="collapseFiles" class="card-text collapse show">
Some quick example text to build on the card title and make up the bulk of
the card's content.
</p>
</div>
</div>
<div id="headingTwo">
<h5 class="card-title">
Or Notes
<a data-toggle="collapse" class="float-right" data-target="#collapseNotes">
<i class="fas"></i>
</a>
</h5>
<div class="card-body">
<p id="collapseNotes" class="card-text collapse show">
Some quick example text to build on the card title and make up the bulk of
the card's content.
</p>
</div>
</div>
<div id="headingThree">
<h5 class="card-title">
Or Name
<a data-toggle="collapse" class="float-right" data-target="#collapseNames">
<i class="fas"></i>
</a>
</h5>
<div class="card-body">
<p id="collapseNames" class="card-text collapse show">
Some quick example text to build on the card title and make up the bulk of
the card's content.
</p>
</div>
</div>
CSS
You can write CSS to target any anchor tag that has data-toggle="collapse" attribute. When it collapses, Bootstraps adds .collapsed class so that you can use it to style the icon accordingly.
a[data-toggle="collapse"] i.fas:before {
content: "\f107"; /* angle-down */
}
a[data-toggle="collapse"].collapsed i.fas:before {
content: "\f106"; /* angle-up */
}
Screenshots
Fiddle Demo
https://jsfiddle.net/davidliang2008/og1t8ksj/26/
You need to use events to catch a change, for example
https://api.jquery.com/on/
Try this:-
$('[data-toggle="collapse"]').on('click', function(){
if ($(this).attr('aria-expanded') == 'true') {
$(this).find('i').addClass('fa-angle-up').removeClass('fa-angle-down');
} else {
$(this).find('i').addClass('fa-angle-down').removeClass('fa-angle-up');
}
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel='stylesheet'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div id="headingTwo">
<h5 class="card-title">
Or Notes
<a data-toggle="collapse" class="float-right" href="#collapseNotes" role="button" aria-expanded="false" data-target="#collapseNotes" aria-controls="collapseNotes">
<i class="fa fa-angle-up"></i>
</a>
</h5>
</div>
<div class="collapse" id="collapseNotes">
Anim pariatur cliche reprehenderit
</div>
It's been a while, but I think this is probably a good answer to this question:
NO NEED TO USE JAVASCRIPT for this. Take advantage of the class 'collapsed' which is added to the wrapping 'a' when the accordion is collapsed.
<a data-toggle="collapse" class="float-right" href="#collapseFiles"
role="button" aria-expanded="true" data-target="#collapseFiles"
aria-controls="collapseNotes">
<span class="arrowup"> <i class="fas fa-angle-up></i> </span>
<span class="arrowdown"> <i class="fas fa-angle-dowm></i> </span>
</a>
then on your stylesheet:
.accordion .arrowdown {
display: none
}
----------
.accordion .collapsed .arrowup {
display: none
}
---------
.accordion .collapsed .arrowdown{
display: block
}
I have the following HTML:
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<a class="panel-heading collapsed" role="tab" id="headingOne"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
<h4>Add Data</h4>
<i class="fa fa-chevron-circle-down"></i>
</a>
<div id="collapseOne"
class="panel-collapse collapse in"
role="tabpanel"
aria-labelledby="headingOne">
<div class="panel-body">
Content Here
</div>
</div>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
and the following JavaScript using jQuery:
$('.multi-field-wrapper').each(function () {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function (e) {
$('.multi-field:first-child', wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function () {
if ($('.multi-field', $wrapper).length > 1) {
$(this).parent('.multi-field').remove();
}
});
});
The problem is, when collapsible is only one the href="#collapseOne will target tabpanel collapseOne, but when I've added one or more multi-fields the href="#collapseOne" will target all tabpanel's id because it has same name.
Is there any way to make the #href and tabpanel's id different each time we press the 'Add field' button or using this alternative script at this jsfiddle?
I'm trying to generate bootstrap collapse panels within Thymeleaf loop, like that:
<table>
<tr th:each="p, iterStat : ${completedList}">
<td style="padding: 0 15px 0 15px;">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" th:text="${p.key}">p.k</a>
<span style="float: right;" class="glyphicon glyphicon-ok"></span>
</h4>
</div>
<div th:id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<span th:text="${p.value}"></span>
</div>
</div>
</div>
</td>
</tr>
</table>
But I have the same id and href for every element of the loop so the panels doesn't works.
Can I do something to change dynamically id and href?
You can use the status variable (iterStat) to create a unique id for every row:
<a data-toggle="collapse" data-parent="#accordion" th:href="'#collapse' + ${iterStat.index}" th:text="${p.key}">
and
<div th:id="'collapse' + ${iterStat.index}" class="panel-collapse collapse in">
I just ran into this same issue and what I did was
<div class="accordion" id="accordionExample"
th:each="todo : ${todos}">
<div class="accordion-item">
<h2 class="accordion-header" th:id="heading + ${todo.id}">
<button class="accordion-button" type="button"
data-bs-toggle="collapse"
th:attr="data-bs-target=|#col${todo.id}" aria-expanded="true"
aria-controls="collapseOne">Accordion Item #1</button>
</h2>
<div th:id="col + ${todo.id}"
class="accordion-collapse collapse show"
th:attr="aria-labelledby=|heading${todo.id}|"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It
is shown by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this
with custom CSS or overriding our default variables. It's also
worth noting that just about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</div>
</div>
</div>
</div>
instead of concatenating the id, just add it as a string with the th:attr, then the value should be put inside the | {dynamic value e.g id, uuid, primary key} |.
then concatenate with the + for the th:id which will automatically know its equivalent attribute as set earlier.
I have a navbar on the left side of my web application with each item of the menu having an expandable submenu to navigate through the pages. Unfortunately, every time I click on one of the links of a submenu the new page is loaded, but the submenu is collapsed again. I would like to have the submenu still expanded after clicking one of its links.
Here is my code:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="nav-header panel panel-default">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<span class="glyphicon glyphicon-th"></span>Cluster
</h4>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="nav-item"><span class="glyphicon glyphicon-eye-open"></span>#Html.ActionLink("overview", "ClusterAll", "Cluster", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
<div class="nav-item"><span class="glyphicon glyphicon-plus"></span>#Html.ActionLink("create", "ClusterCreation", "Cluster", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
<div class="nav-item"><span class="glyphicon glyphicon-pencil"></span>#Html.ActionLink("edit", "ClusterEdit", "Cluster", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
</div>
</div>
</div>
<div class="nav-header panel panel-default">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<span class="glyphicon glyphicon-hdd"></span>Applications
</h4>
</div>
</a>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="nav-item"><span class="glyphicon glyphicon-ok"></span>#Html.ActionLink("verify", "ApplicationPortfolioEdit", "Applications", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
<div class="nav-item"><span class="glyphicon glyphicon-list-alt"></span>#Html.ActionLink("manage", "ApplicationMassEdit", "Applications", new { area = "" }, new { #class = "nav-item", style = "text-decoration:none;" })</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The actual menu has more items, this is just an example with 2 items to show you.
Any ideas what I have to do to keep the submenus expanded after clicking on its links?
I'm very new to web design, but I hope you can help me:)
If I get what you're trying to do you can pass the opened submenu as a # param in your url so when they do click a link to the new page you can have Javascript/jQuery read the # and open the proper submenu.
Something like this..
Applications
And then with Javascript & jQuery we can read it with..
$(document).ready(function() {
hash = window.location.hash;
$(hash).collapse('show');
});
We can use $(hash).collapse('show'); to show the content because you're using Bootstrap.
But this goes under the impression I understand what you're trying to say. :)
I have several Collapsible panels on one page triggered by a href links, and using php the first is set to active(open) when the user lands on the page.
Using jquery I'm trying to toggle the text in the links.
$(".btn[data-toggle='collapse']").click(function() {
$(this).text($(this).text() == 'Close' ? 'More' : 'Close');
});
But the first link which is open is working in reverse, so when the user clicks(to collapse the panel) it displays Close instead of More.
Any help would be greatly appreciated.
HTML:
<a class="btn" id="collapsible" data-toggle="collapse" data-parent="#accordion" href="#collapse535">Close</a>
<div id="collapse535" class="panel-collapse collapse in">
<!--Content-->
</div>
<a class="btn" id="collapsible" data-toggle="collapse" data-parent="#accordion" href="#collapse536">More</a>
<div id="collapse536" class="panel-collapse collapse ">
<!--Content-->
</div>
<a class="btn" id="collapsible" data-toggle="collapse" data-parent="#accordion" href="#collapse537">More</a>
<div id="collapse537" class="panel-collapse collapse ">
<!--Content-->
</div>
Toggle it on load:
$(function() {
$(".btn[data-toggle='collapse']:first").text("Close");
});