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?
Related
I am trying to add a search function to a bootstrap accordion that is used for FAQ.
So far, i can't get it to search properly.
JQuery
$(document).ready(function(){
$("#searcher").on("keypress click input", function () {
var val = $(this).val();
if(val.length) {
$(".accordion .card .collapsed").hide().filter(function () {
return $('.card-body', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1;
}).show();
}
else {
$(".accordion .card .collapsed").show();
}
});
});
<div class="search-container">
<input class="input-medium search-query" id="searcher" placeholder="Search">
<button class="btn">Search</button>
</div>
<br>
<div class="row">
<div class="col-sm-12">
<div class="tab-content">
<div id="tab1" class="tab-pane fade show active">
<div class="accordion" id="accordion1">
<div class="card">
<div class="card-header collapsed" id="genOne">
<a href="#collapseOne" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
<p class="mb-0">
Where are you located?
</p>
</a>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="genOne"
data-parent="#accordion1">
<div class="card-body">
<p style="text-align:center; font-size: 16px; ">We are located in , near the downtown area. To learn about local pick
up
options please contact us
at
<br /> support#
or
by phone 616
</p>
That is all of the code im using, if someone can point me in the right direction that would be awesome!
Thank you
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());
});
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. :)
sorry for my english.
First, what is wrong in the script? The chevron doesn't change.
I'm not a web master. I'm a beginner. Thanks a lot.
This is my template :
<div class="panel-heading">
<div class="panel-title">Tableau de bord
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></a>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-user"></i>Information</li>
<li class="list-group-item"><i class="fa fa-power-off"></i>Log out</li>
</ul><!--/.list-group-->
</div><!--/collapseOne-->
<div class="panel-footer">
<div class="panel-title">Archives
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span></a>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<ul class="list-group" style="margin-bottom:0">
<li class="list-group-item"><i class="fa fa-arrow-right"></i>2015</li>
<li class="list-group-item"><i class="fa fa-arrow-right"></i>2014</li>
</ul><!--/.list-group-->
</div><!--/collapseTwo-->
</div><!--/.panel-blue-->
</div><!--/.panel-group accordion-->
and this is the script :
<script>
$('.clickable').on('click', function (e) {
var $this = $(this);
if (!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.panel-title').slideUp();
$this.addClass('panel-collapse');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
} else {
$this.parents('.panel').find('.panel').slideDown();
$this.removeClass('.panel-title');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
})
</script>
I replaced the two lines addClass/removeClass by a toggleClass which do the same, and it seems to work : http://jsfiddle.net/FLZpk/1/
$('.clickable').on('click', function (e) {
var $this = $(this);
if (!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.panel-title').slideUp();
$this.addClass('panel-collapse');
} else {
$this.parents('.panel').find('.panel').slideDown();
$this.removeClass('.panel-title');
}
$this.find('i').toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
})
jQuery toggleClass doc : https://api.jquery.com/toggleClass/
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");
});