How do I change the title attribute on collapsible content using jQuery - javascript

I have these collapsible panels and I want the title attribute to say when they are open or closed. I am trying to get it to work with the script that I am using now but without any luck.
thx
<div class="container">
<h1>Information</h1>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-target="#content1">
<h2 class="panel-title" title="hidden content closed">
Milky Way Black Hole Belches
</h2>
</div>
<div id="content1" class="collapse">
<div class="panel-body">
The monster back hole at the center of the Milky Way belched out an exceptionally high number of powerful X-ray flares in August 2014, did the beast chow down on a passing gas cloud, or is this typical for black holes? </span>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-target="#content2">
<h2 class="panel-title" title="hidden content Closed" >
Tiny Pluto Moon Kerberos Unveiled
</h2>
</div>
<div id="content2" class="collapse">
<div class="panel-body">
Newly received photos captured by NASA's New Horizons spacecraft reveal that Pluto's tiny moon Kerberos is smaller and brighter than researchers had expected.
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.panel-heading').click(function(){
var target = $(this).data("target");
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide')
$(this).attr('title', 'hidden content closed');
});
$(target).collapse('toggle')
$(this).attr('title', 'hidden content open');
});
});
</script

I think this is what you need :
$('.panel-heading').click(function(){
var target = $(this).attr("data-target");
$(this).find("h2").toggleClass("inactive active");
$(this).find("h2").attr("title",$(this).find("h2").hasClass('inactive') ? 'hidden content closed' : 'hidden content opened');
$(target).toggle();
});
http://jsfiddle.net/rzseLj27/3/

Your code is currently not working because you are applying the title change to the containing #accordion element and not the actual title. Also, you are applying a new listener to that accordion each time.
The best way to accomplish this using Bootstrap is to use the data-* attributes and then listen for the changes in order to change the title. The code below does exactly what you want;
Working fiddle
Javascript
$(document).ready(function() {
$(".collapse").on('hide.bs.collapse', function(){
var title = $(this).parents('div.panel').find('.panel-title')[0];
$(title).attr('title','hidden content closed');
});
$(".collapse").on('show.bs.collapse', function(){
var title = $(this).parents('div.panel').find('.panel-title')[0];
$(title).attr('title','hidden content open');
});
});
HTML
<div class="container">
<h1>Information</h1>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-target="#content1" data-parent="#accordion" data-toggle="collapse">
<h2 class="panel-title" title="hidden content closed">
Milky Way Black Hole Belches
</h2>
</div>
<div id="content1" class="collapse">
<div class="panel-body">
The monster back hole at the center of the Milky Way belched out an exceptionally high number of powerful X-ray flares in August 2014, did the beast chow down on a passing gas cloud, or is this typical for black holes? </span>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-target="#content2" data-parent="#accordion" data-toggle="collapse">
<h2 class="panel-title" title="hidden content Closed" >
Tiny Pluto Moon Kerberos Unveiled
</h2>
</div>
<div id="content2" class="collapse">
<div class="panel-body">
Newly received photos captured by NASA's New Horizons spacecraft reveal that Pluto's tiny moon Kerberos is smaller and brighter than researchers had expected.
</div>
</div>
</div>
</div>
</div>
Update (with text in title)
If you also want to include the text of the heading in the element title, it is a simple matter of grabbing that text in the listener and appending it on.
Working fiddle
$(".collapse").on('hide.bs.collapse', function(){
var title = $(this).parents('div.panel').find('.panel-title')[0];
var titleText = $(title).text();
$(title).attr('title',titleText+' hidden content closed');
});
$(".collapse").on('show.bs.collapse', function(){
var title = $(this).parents('div.panel').find('.panel-title')[0];
var titleText = $(title).text();
$(title).attr('title',titleText+' hidden content open');
});

This sets the title on panel-heading div instead of the h2 but does what you asked: http://jsfiddle.net/x057wp3L/2/
<div class="container">
<h1>Information</h1>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-target="#content1" title="hidden content closed">
<h2 class="panel-title">
Milky Way Black Hole Belches
</h2>
</div>
<div id="content1" class="collapse">
<div class="panel-body">
The monster back hole at the center of the Milky Way belched out an exceptionally high number of powerful X-ray flares in August 2014, did the beast chow down on a passing gas cloud, or is this typical for black holes? </span>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-target="#content2" title="hidden content closed">
<h2 class="panel-title">
Tiny Pluto Moon Kerberos Unveiled
</h2>
</div>
<div id="content2" class="collapse">
<div class="panel-body">
Newly received photos captured by NASA's New Horizons spacecraft reveal that Pluto's tiny moon Kerberos is smaller and brighter than researchers had expected.
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.panel-heading').click(function(){
var target = $(this).data("target");
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
// Set the title of all panels to be "closed"
$('#accordion .panel-heading').each(function () { $(this).attr('title', 'hidden content closed'); });
});
$(target).collapse('toggle');
// Set the title of the clicked panel to be "open"
$(this).attr('title', 'hidden content open');
});
});
</script>

Related

Collapsible Panel Width

I would like the bottom panel to expand its width to col-md-12when the top panel is collapsed, and when the user expands the top panel again the width of the bottom panel goes back to col-md-8.
I'm fairly new at this, but this is my code so far:
var panel = document.getElementById("panel");
var panel1 = document.getElementById("panel1");
function secondPanelResize() {
if (panel.style.height <= "45") {
panel1.classList.remove("col-md-8");
panel1.classList.add("col-md-12");
} else {
panel1.classList.remove("col-md-12");
panel1.classList.add("col-md-8");
}
}
<div class="panel-group col-md-12">
<div class="col-md-8" id="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" onclick="secondPanelResize()" id="collapse">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body" id="panelbody">Panel Body</div>
</div>
</div>
</div>
<div class="col-md-8" id="panel1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Collapsible panel</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel-body" id="panelBody">Panel Body</div>
</div>
</div>
</div>
</div>
I've managed to make the bottom panel expand its width when the top panel is closed, but I cannot figure out how to make the width reduce to its original when the top panel is open.
Here's a basic example of adding and removing CSS classes with JS.
function topPanel() {
var topPanelEle = document.getElementById('topPanel')
var bottomPanelEle = document.getElementById('bottomPanel')
if (!topPanelEle.classList.contains('expanded')) { //To aviod multiple clicks
topPanelEle.classList.add('expanded');
}
bottomPanelEle.classList.remove('expanded');
}
function bottomPanel() {
var topPanelEle = document.getElementById('topPanel')
var bottomPanelEle = document.getElementById('bottomPanel')
if (!bottomPanelEle.classList.contains('expanded')) { //To aviod multiple clicks
bottomPanelEle.classList.add('expanded');
}
topPanelEle.classList.remove('expanded');
}
.top-panel {
padding: 16px;
background-color: red;
}
.bottom-panel {
padding: 16px;
background-color: blue;
}
.expanded {
height: 100px;
}
Expand Top Panel
<div id="topPanel" class="top-panel">Top Panel</div>
Expand Top Panel
<div id="bottomPanel" class="bottom-panel">Bottom Panel</div>
Now for in your case I'm not entirely sure because no CSS was given but in your added classes (like expanded in my case) could contain height: 100% !important and override the default CSS that was added (like top-panel or bottom-panel in my case) which could be something like height: 50%. I also find it easier using 2 functions or having 1 with a parameter so I know whether it's the top or bottom panel straight from where its being called, unless you have 1 button as a toggle.

toggle class on parent div on click (or ng-click)

I have some collapseable panels and i want to add a resize button. For this i've made this javascript code:
function myFunction () {
$(".elementoGrafico").click(function () {
$(this).toggleClass("col-md-12");
$(this).toggleClass("col-md-6");
});
};
the html code is:
<div class="col-md-12 ui-state-default elementoGrafico">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading ">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" class="component-button max-min-button more-less glyphicon glyphicon-chevron-up"></a>
Gráfico 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in elemento"> <canvas class="chart" id="myChart"></canvas>
</div>
</div>
</div>
</div>
But it doesn't work properly. Sometimes i have to click more than one time and some times the chart inside don't resizes like the div. (i want a code that works for all elements, not just one, so i want to do it using class, not id.)
I could use angularjs too.
Thank you.
Use this:
$(".elementoGrafico").each(function() {
let panel = this;
$(this).find(".resize-button").click(function() {
$(panel).toggleClass("col-md-12");
$(panel).toggleClass("col-md-6");
});
});
What this does is find the resize button for each panel and assign it a click handler which changes the panel itself.

add and remove class on resize button click

I have some collapseable panels and i want to add a resize button. For this i've made this javascript code:
function myFunction () {
$(".elementoGrafico").click(function () {
$(this).toggleClass("col-md-12");
$(this).toggleClass("col-md-6");
});
};
the html code is:
<div class="col-md-12 ui-state-default elementoGrafico">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading ">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" class="component-button max-min-button more-less glyphicon glyphicon-chevron-up"></a>
Gráfico 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in elemento"> <canvas class="chart" id="myChart"></canvas>
</div>
</div>
</div>
</div>
But it doesn't work. How can make it work? (i want a code that works for all elements, not just one, so i want to do it using class, not id.)
Thank you.
"elemnto1" is not how you grab each class, you're missing the period
$(".elemento1").each()
edit:
$(".elemento1").click(function() {
$(this).toggle("col-md-12");
$(this).toggle("col-md-6");
});
function myFunction () {
$( "elemento1" ).each(function() {
$(this).toggleClass("col-md-12");
$(this).toggleClass("col-md-6");
});
};

AngularJS - JQuery News Ticker - After moving news the javascript function doesn't get called

This is an awkward problem, which will be better explained by looking at the live demo. Basically I have a news box populated with ng-repeat using Angular. Then I am using a jquery plugin called news ticker which allows the news headlines to move around. The first time you land on the page the news items are in their proper spots and they call the function accordingly. After moving them up or down, they stop calling the function, set a breakpoint in the code and after moving the breakpoint is never hit.
Edit - After researching this further I have found that it is because the elements need to be compiled using $compile after they're re added. However following some examples I have not gotten this to work. I need a way of compiling after a move event with this plugin.
Live demo
Angular Script for with function that should be called.
$scope.UpdateNews = function (item,number) {
console.log(item + ' ' + number);
switch (item)
{
case 'General':
$scope.NewsCast.General.Body = $scope.News.GeneralNews[number].Text;
break;
}
};
What the HTML looks like with the news boxes
<script src="http://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/scripts/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading"> <span class="glyphicon glyphicon-list-alt logo-inverse pull-left"></span><b> General News</b></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="demo1" style="overflow-y: hidden; height: 280px;" ng-model="Idk">
<li style="" class="news-item text-left" ng-repeat="item in News.GeneralNews"><strong>{{item.DateValue | date: "MMM dd yyyy"}}</strong> {{item.Preview}}<a class="FakeClickable" ng-click="UpdateNews('General',item.index)" data-target="#GeneralModal" data-toggle="modal">Read more...</a></li>
</ul>
<div ng-if="Width>768">
<div ng-include="'../pages/Modals/General/GENERAL_INLINE.html'"></div>
</div>
</div>
</div>
</div>
<div class="panel-footer"> </div>
</div>
</div>

Bootstrap Angular.js accordion not auto collapsing

I'm trying to generate an accordion with ng-repeat much as shown in the following sample:
<div class="panel-group" id="accordion">
<div ng-repeat="One_Item in Items_List track by One_Item.Item_ID">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion_{{One_Item.Item_ID}}" href="This_Page/#collapse_{{One_Item.Item_ID}}">
{{One_Item.Item_ID}}</a>
</h3>
</div>
<div class="panel-collapse collapse in" id="collapse_{{One_Item.Item_ID}}">
<div class="panel-body">
<div class="form-group" style="margin:0px 0px 5px -15px">
<label class="control-label col-sm-3">For Item-ID {{One_Item.Item_ID}} the related text is {{One_Item.Text}}</label>
<!--- Other stuff... -->
</div>
</div>
</div>
</div>
</div>
</div>
All works OK (in terms of the data being shown), except that when expanding on entry in the accordion, other entry(ies) that were expanded do not collapse.
Checked a lot of examples but still cannot figure out why.
I don't know why do you create new one accordion
there is good one at https://angular-ui.github.io/bootstrap/ components
Default settings uibAccordionConfig
closeOthers (Default: true) - Control whether expanding an item will cause the other items to close.
Hope it help you
This worked for me. It may need some tweaking to suit your markup exactly.
The general idea is to problematically collapse the others when one is clicked.
var $triggers = $element.find('[data-toggle="collapse"]');
$triggers.on('click', function () {
var t = $(this);
$.each($triggers, function(i, $trigger) {
if ($trigger !== t) {
$($trigger).parent().find('.collapse').collapse('hide');
}
});
});

Categories