I am getting data from a service, so the number of accordions will be variable. I used ng-repeat to dynamically display the accordion
<div ng-controller = "groupController">
<div ng-repeat = "groups in groupNames">
<div class = "panel-group" id = "accordion">
<div class = "panel panel-default">
<div class="panel-heading">
<div class = "panel-title">
<a data-toggle= "collapse" data-parent="#accordion" href="#collapse{{$index}}"> {{groups.team}} </a>
</div>
</div>
<div id="collapse{{$index}}" class = "panel-collapse collapse">
<div class = "panel-body">
<!-- display some data in the panel body -->
</div>
</div>
</div>
</div>
</div>
<button class = "btn btn-primary">collapseAll</button>
<button class = "btn btn-primary">expandAll</button>
</div>
How do I achieve collapse all and expand all using the controller. The answers that I found mainly solved the accordion provided by ui-bootstrap. In particular how do I manipulate the hrefs in angularjs to get collapse all and expand all?
At first you should remember to set close-others=false for your accordion, because in ui-bootstrap it is close-others=true by default which means that you can only expand one group at a time.
Then you can control the is-open property of the accordion-group by binding it to some variable in your controller. And then link the buttons to some function in your controller that set all these variables to be true or false.
Here is an example on Plunker.
Related
How to hide the div "whole" when click on #clickit so that my setting page content won't show and .user page will show in ui-view
setting html page
<!-- page content -->
<div class="whole">
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit"> // <-- Click to hide "whole" class
<div class="col-md-12 col-sm-12 col-xs-12">
<a ui-sref=".user">Users & practitioners</a>
</div>
</div>
</div>
</div>
<div ui-view> // I HAVE TO SHOW THIS DIV AND HIDE SETTING DIV
</div>
<!-- /page content -->
I don't want a jquery solution.. all i need a angular of pure javascript solution
<div class="whole" ng-hide="hideWhole> // <-- assign a scope var dependency
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit" ng-click="hideWhole=1"> // <-- update scope var
Ideally you'll use a controller variable (ctrl.hideWhole in controllerAs syntax) so you can update the display of the element from elsewhere in the app.
Here is a JavaScript solution to your problem, attaching a function to the onclick event of your element which sets the css display attribute to none.
<div class="row" id="clickit" onclick="hideWhole()">
function hideWhole() {
var wholeDiv = document.getElementsByClassName(".whole");
wholeDiv.style.display = 'none';
}
I am new and start to learn writing html. In my code, the situation would be that when I click to a button, I used $(event.currentTarget).parents('.page-container') to get the whole html element of my currentTarget and then I have all elements like below:
<div class="page-container">
<div id="mainContainer" class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div id="accordionSummaryList" class="sidebar-left col-lg-2 col-md-2 col-sm-2 sidebar-offcanvas">
<div class="mainTenant">
<div class="subTenant">
<h5 data-toggle="collapse" data-parent="#accordionSummaryList" href="#toggleAbleListGroup1">Admins</h5>
<div class="container-fluid panel-collapse collapse in" id="toggleAbleListGroup1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
What I would like to do is I would like to find all of the div element which have the class = "collapse in" and I want to remove the class "in" to hide the content inside of this div box.
How can I do that?
in vanilla-JS
[].forEach.call(document.querySelectorAll('.subTenant .collapse.in'), function(el){
el.classList.remove('in');
}
or with jQuery (if already included)
$('.subTenant .collapse.in').removeClass('in');
If you want to do it with jquery: $(".collapse.in").removeClass("in")
you can do it with jquery
jQuery('.collapse').removeClass('in');
You can also do it with this
if($(event.currentTarget).parents('.page-container').find('.collapse'))
{
$('.collapse').removeClass('in');
}
HTML -
<div class="col-md-3" ng-repeat="idea in ideas">
<div class="col-md-12 ideaResult" ng-mouseleave="hideIcon()">
<a class="resultCover col-md-12" style="background-image:url(https://le-uploaded-image-bucket.s3.amazonaws.com/{{idea.coverImage}});"></a>
<div class="sharebtn icon-btn" ng-click="socialIcon = !socialIcon">
<span style="background-image:url('/images/idea/share-add.png');background-color:white" title="Share" class="iconContainer"></span>
</div>
<div class="share-fb share-icon" ng-show="socialIcon">
<span class="iconContainer" title="Share" style="background-image:url('/images/idea/fb-icon.png');background-color:white"></span>
</div>
<div class="share-tw share-icon" ng-show="socialIcon">
<span class="iconContainer" title="Share" style="background-image:url('/images/idea/twitter-icon.png');background-color:white"></span>
</div>
<div class="share-msg share-icon" ng-show="socialIcon">
<span class="iconContainer" title="Share" style="background-image:url('http://cdn.thegadgetflow.com/wp-content/themes/thegadgetflow4/images/email-icon.png');background-color:white"></span>
</div>
<div class="endorse-icon icon-btn">
<span style="background-image:url('/favicons/favicon-96x96.png');background-color:white" title="Endorse" class="iconContainer"></span>
</div>
<div class="resultIcon">
<span title="my goal" class="iconContainer" style="background-image:url(https://le-uploaded-image-bucket.s3.amazonaws.com/{{idea.goalIcon}});background-color:{{idea.backgroundColor}}">
</span>
</div>
<h2 class="resultName">{{idea.title}}</h2>
<div class="col-md-12 resultDescription"><p>{{idea.description | limitTo: 48}}{{idea.description.length > 48 ? '...' : ''}}Continue Reading</p></div>
</div>
</div>
Controller JS -
$scope.hideIcon = function(){
$scope.socialIcon = false;
};
Requirement -
I want to hide the DIVs with "share-icon" class when mouse pointer go out of the parent DIV(i.e. DIV with class ideaResult), but at the same time I click on the DIV with class name "shareBtn" which will result in toggling those three DIVs with "share-icon" class which is working fine.
Problem -
When the page is loaded, these three DIVs (ie. "share-icon" class) are already hidden which is fine but when I click on the DIV with class "shareBtn", these DIVs appear which is also fine, but when mouse pointer goes out of the parent DIV ("ideaResult"), these three DIVs continues to be appear which I don't want.
Can someone help me to solve this problem ? Thanks in advance
Here is the Mock Fiddle - https://jsfiddle.net/x2zzppoa/
The visibility on those 3 divs isn't related to the class "share-icon", but to $scope.socialIcon, whitch initialy is set to undefined, and after you click the upper div it is set to true, hence the visibility of your divs.
The solution for this code snippet is probably:
ng-mouseleave="socialIcon = false"
https://jsfiddle.net/ronapelbaum/x2zzppoa/1/
I need to handle panel collapse behavior without using ID or data attributes. Ideally by setting a "collapsible" class on the parent div that can collapse its content, and a click on the heading should trigger the collapse
Here's the target HTML I'd like to write to handle collapse behavior automatically
<div class="panel-group collapse-all-but-one">
<div class="panel panel-primary panel-collapsible>
<div class="panel-heading">Click me to collapse</div>
<div class="panel-body">I will collaaaaaaapse</div>
</div>
<div class="panel panel-warning panel-collapsible">
<div class="panel-heading">Hey another one</div>
<div class="panel-body">I will close when the other one opens</div>
</div>
</div>
Here's my magic piece of code (the ready stuff ensures compatibility with rails/angularJS)
var ready
ready = function(){
$(".panel-collapsable")
.children(".panel-heading")
.click(function(){
var group = $(this).parent().parent()
if (group.hasClass("panel-group one-at-a-time")){
group.children(".panel").children(".panel-body")
.collapse('hide')
}
$(this)
.next('.panel-body')
.collapse('toggle')
})
}
$(document).ready(ready);
$(document).on('page:load', ready);
Remember to add some bootstrap classes like .collapse .in or .collapsed to initialize correct behaviour or the first click isn't going to do anything.
<div class="panel-body collapse in">I am expanded on page load</div>
...
<div class="panel-body collapse">I am collapsed on page load</div>
I have dynamically created bootstrap accordions containing dynamically created groups in each. I want to add the in class to the first group in each accordion, which opens it as you can see in the linked bootstrap example.
<div class="panel panel-default">
<div class="panel-heading">
<h6 class="panel-title">
<a class="accordionToggle" data-toggle="collapse" data-parent="#dynamicId" href="#dynamicId">
Title
</a>
</h6>
</div>
<div class="panel-collapse collapse" id="dynamicId">
...
</div>
</div>
...
There can be any number of .panel.panel-default which can contain any number of .panel-collapse.collapse
Here is what I have tried, as well as some other variations, to add the in class to the first .panel-collapse.collapse of each .panel.panel-default but I keep ending up with it adding the class to each one and not just the first.
$(".panel.panel-default").each(function (index) {
$(this).children(".panel-collapse.collapse:first").addClass("in");
});
$(".panel.panel-default").each(function (index) {
$(this).find(".panel-collapse.collapse:first").addClass("in");
});
$(".panel.panel-default").each(function (index) {
$(this).children(".panel-collapse.collapse").first().addClass("in");
});
Any help will be appreciated!
You need to iterate the panel-group, because I think what you are trying to do is to expand the first item in each accordion
$(".panel-group").each(function (index) {
$(this).children(".panel-collapse.collapse:first").addClass("in");
});
Demo: Fiddle
Simply add this:
$(document).ready(function(){
$(".panel-collapse.collapse:first").addClass("in");
});
It works for me.