Bootstrap Angular.js accordion not auto collapsing - javascript

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');
}
});
});

Related

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");
});
};

Bootstrap Columns Toggle with Javascript

I need help with Bootstrap Columns Toggle that converts a 12 column grid into other two columns with 9 and 3 columns, and back to 12 columns again.
I have a prototype, but I can't seem to get it quite right. Here's the JSFIDDLE.
To understand the issue, I have 3 different scenarios that are explained in the prototype that basically starts at 12 columns, gets toggled to 9 + 3 columns, and back to 12 columns.
The HTML code is as follow:
<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2 class="align-center">Current Prototype</h2></div>
<div id="LeftColumn" class="col-md-12 col-sm-12 col-xs-12">
<h4>Left Column</h4>
<p>Currently is set to col-md-9, but it should initially be col-md-12 and be toggled to col-md-9 while maintaining its responsive properties.</p>
<p><span class="strong">DESIRED RESULT:</span>Toggle the properties <div class="col-md-12 col-sm-12 col-xs-12"> to <div class="col-md-9 col-sm-9 col-xs-12"> when the "Toggle Right" column button is clicked while maintaining the existing functionality.</p>
<div id="Bar" class="main-container collapse in">
Toggle Right
</div>
<div class="clearfix"></div>
<br />
</div>
<div id="RightColumn" class="col-md-3 col-sm-3 col-xs-12">
<div id="Foo" class="main-container collapse" style="border: dotted 1px green;">
Toggle Left Column <i class="fa fa-bars"></i>Additional content will be displayed in this column once triggered.
<div style="height: 150px;"></div>
</div>
</div>
The Javascript that needs attention is as follow:
$(".main-container.collapse").on('shown.bs.collapse', function() {
//when a collapsed div is shown hide all other collapsible divs that are
visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
$('#toggle-right').click(function(e) {
var left = $('#LeftColumn');
if (left.hasClass('col-md-9')) {
left.removeClass("col-md-9 col-sm-9").addClass("col-sm-12 col-md-12");
} else {
left.removeClass("col-md-12 col-sm-12").addClass("col-sm-9 col-md-9");
}
})
I would certainly appreciate any help and expertise you can provide with a custom jsfiddle. Thanks!
There are just couple of minor changes you need to do to toggle.
Problem: You are adding/removing the classes on the click of the #toggle-right button which is fine but you are NOT again doing the same on the next toggle button namely your <a>(yellow warning button) once your 12 columns get divided to 9 and 3.
<i class="fa fa-bars"></i>
Solution:
All you need to do is call that same function which adds/removes the classes on the click of the <a> button as well. Firstly give a class or an id to the element to identify it.
<i class="fa fa-bars"></i>
Now you just need to add that new selector in your existing click function.
$('#toggle-right, #toggle-left').click(function(e) {
var left = $('#LeftColumn');
if (left.hasClass('col-md-9')) {
left.removeClass("col-md-9 col-sm-9").addClass("col-sm-12 col-md-12");
} else {
left.removeClass("col-md-12 col-sm-12").addClass("col-sm-9 col-md-9");
}
})

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>

How to set focus on a section of my web page and then scroll down

Using Protractor, I would like to first set focus on a left panel on my web page, and then scroll down in order to click on a filter.
How can I do this using the Protractor syntax?
Here is my HTML:
<section id="filters" style="height: 266px; overflow: hidden;" tabindex=
"5076">
<div class="ng-binding" id="currentSearchTitle">
Current search
</div>
<div id="currentSearch">
<div id="searchBlock">
<div id="jobTypeBlock">
<div class="ng-binding" id="jobTypeTitle">
Filter by job type
</div>
<div class="ng-scope">
<div class="ng-scope">
<div class="ng-scope">
<div class="ng-scope">
<div class="ng-scope">
<div class="ng-scope">
<div class="ng-scope"></div>
To set the focus on your panel, you can maybe click on it:
element(by.id('filters')).click();
Then to scroll to your filter, you can execute a client-side script:
var filter = browser.findElement(by.id('jobTypeTitle'));
var scrollIntoView = function () {
arguments[0].scrollIntoView();
};
browser.executeScript(scrollIntoView, filter);
You can have a look at the webdriverjs documentation.
You can use this too:
browser.executeScript("arguments[0].scrollIntoView();", basePage.faqText.getWebElement());
I does the magic in one line.
basePage.faqText is the element that I want to scroll here.

Categories