We Keep Coding

Two Data-Parent (ID wrapped in ID) and Bootstrap does not work

I have to place my accordion in a <div style="display:none;"> and then div which also have an id tag ( <div id="outerid"> ) because I am popping up my accordion by tooltip.js, where <div id="outerid"> defines the target for tooltip.js.
My tabs
( <a class="accordion-header" data-toggle="collapse" data-parent="#accordion" onmouseover="this.click();" href="#tab2">HOVER ME FOR TAB 2</a> ) works fine out of <div style="display:none;">, even within <div id="outerid">. As soon as i place <div id="outerid"> with in <div style="display:none;"> the following happening.
My accordion shows up beautifully when you hover over outerid's target,
but the tabs in the accordion do not work.
(NOTE: If I have an external target e.g href="http://helloworld.com in that case,the tabs work, but with anchor target e.g href="#tab2", they don't.
Anyone has any idea why is that?
<div style="display:none;">
<div id="outerid">
<div id="accordion">
<div class="accordion-group panel">
<a class="accordion-header" data-toggle="collapse" data-parent="#accordion" onmouseover="this.click();" href="#tab1">
HOVER FOR TAB 1
</a>
<div id="tab1" class="collapse in">
<div class="accordion-body">
<p>HELLO WORLD 1st</p>
</div>
</div>
</div>
<div class="accordion-group panel">
<a class="accordion-header" data-toggle="collapse" data-parent="#accordion" onmouseover="this.click();" href="#tab2">
HOVER ME FOR TAB 2
</a>
<div id="tab2" class="collapse">
<div class="accordion-body">
<p>HELLO WORLD 2nd </p>
</div>
</div>
</div>
<div class="accordion-group panel">
<a class="accordion-header" data-toggle="collapse" data-parent="#accordion" onmouseover="this.click();" href="#tab3">
HOVER ME FOR TAB3
</a>
<div id="tab3" class="collapse">
<div class="accordion-body">
<p>HELLO WORLD 3rd</p>
</div>
</div>
</div>
</div>
</div>
<!---End Accordion---->
</div>
<!--- Outerid end---->
</div><!---End Non Display--->

how to set first accordion panel to close?

I have 5 accordions and data under each accordion but wat i need is that the all the accordion has to be closed first and when i click the accordion then i need it to be opened.
<div class="panel panel-default" style=" background: rgba(0,0,0,0.1)">
<div class="panel-heading" style="background:rgba(0,0,0,0.7);">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<h4 class="panel-title">SUPPLIERS <b class="closed"></b>
</h4>
</a>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p class="title"> > BP</p>
<p class="title"> > CHEVERON </p>
<p class="title"> > CITGO </p>
<p class="title"> > EXOON </p>
</div>
</div>
This is the code sample for the first accordion is there anyway to close the first accordion and open it only on click?

Your need to remove class in from accordion collapse..
<div id="collapse1" class="accordion-body collapse">

Hide on bootstrap-collapse is not working

I am using bootstrap-collapse.js v2.0.3.
I have 2 queries on show/hiding accordian.
1. Need to collapse the first accordian body expanded by default.
To show the first accordian, I am calling $('#Head_1').collapse ('show'); but it is not working.
2. Clicking on div#Head_2 need to collapse the expanded and need to expand Head_2. For this I am calling
$('#Head_1').collapse ('hide');
$('#Head_2').collapse ('show');
In this case Head_2 getting expanded but Head_1 is not getting collapsed.
<div id="AccordianViewList" class="accordion" >
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList" href="#Head_1">Head_1</a>
</div>
<div class="accordion-body collapse in" id="Body1">
<div class="accordion-inner">
<ul class="unstyled" >
<li class="listItem inFocus" >item1</li>
<li class="listItem" >item2</li>
<li class="listItem" >item3/li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList" href="#Head_2">Head_2</a>
</div>
<div class="accordion-body in collapse" id="Head_2">
<div class="accordion-inner">
<ul class="unstyled" >
<li class="listItem inFocus" >item4</li>
<li class="listItem" >item5</li>
<li class="listItem" >item6</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList" href="#Head_3">Head_3</a>
</div>
<div class="accordion-body in collapse" style="height: auto;" id="Head_3">
<div class="accordion-inner">
<ul class="unstyled" >
<li class="listItem inFocus" >item7</li>
<li class="listItem" >item8</li>
<li class="listItem" >item9</li>
</ul>
</div>
</div>
</div>

Remove the in class from any accordion group you don't want expanded on load.
So, for example, if you only want your #Head_1 group to be open, edit your code as such:
...
<div class="accordion-body collapse in" id="Head_1">
...
<div class="accordion-body collapse" id="Head_2">
...
<div class="accordion-body collapse" id="Head_3">
...
You also have a mismatch on the id of your first group. you are using Body1 in one area and Head_1 in the other. Change one so they match.
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList" href="#Head_1">Head_1</a>
</div>
<div class="accordion-body collapse in" id="Head_1">
Live example: http://www.bootply.com/9SYyp5NiLH

Try something like this:
$('#Head_1').collapse('hide');
$('#Head_2').collapse('show');
You should prefix a # to the id to select that particular element.

My work around has been to replace:
$('#Selector').collapse('hide');
with
$('#Selector').addClass('collapse');
EDIT: this is just for the first call though.
$('#Selector').collapse('hide');
works for the subsequent calls. In my case I just make the call to both in my function

Just add and id to every tag link:
<div class="accordion-heading">
<a id="link1" class="accordion-toggle" data-toggle="collapse" data-parent="#AccordianViewList" href="#Head_1">Head_1</a>
</div>
<div class="accordion-body collapse in" id="Head_1">
And then call the click event
if($('#link1').hasClass('collapsed')){
$('#link1').click();
}

Twitter Bootstrap Multi level accordion with jQueryUI sorting

If I drop first level group "Group #2" element in to sub level group list, it will collapse (close) with parent accordion. How to solve this problem?
jsFiddle Demo
$(document).ready(function() {
//append for all headings indicatoe icon-plus
$('.accordion-heading').prepend('<i class="ui-icon ui-icon-triangle-1-e"></i>');
// Change indicator element for sub-menu
$('.accordion-body').on('show', function(e) {
e.stopPropagation();
$(this).siblings('.accordion-heading').children('.ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
});
//Reverse it
$('.accordion-body').on('hide', function(e) {
e.stopPropagation();
$(this).siblings('.accordion-heading').children('.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
});
//Make tabs sortable
$(".accordion-body > .accordion, .sidebar").sortable({
connectWith: ".accordion",
placeholder: "ui-state-highlight"
});
});
HTML
<nav class="accordion1 accordion sidebar">
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one">
Group #1 </a>
</div>
<div class="collapse-one accordion-body collapse" style="height: 0px;">
...
<div class="accordion2 accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one-one">
Sub-group #1 </a>
</div>
<div class="collapse-one-one accordion-body collapse" style="height: 0px;">
...
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one-two">
Sub-group #2 </a>
</div>
<div class="collapse-one-two accordion-body collapse" style="height: 0px;">
...
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one-three">
Sub-Group #3 </a>
</div>
<div class="collapse-one-three accordion-body collapse">
...
</div>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent=".accordion1" href=".collapse-two">
Group #2 </a>
</div>
<div class="collapse-two accordion-body collapse" style="height: 0px;">
...
</div>
</div>

The collapsing and expanding events are bound at loading, and affect the same elements after rearranging.
I don't know if twitter-bootstrap can let you override these events and reset the elements, that need to collapse and expand. If not - maybe consider extending their version.

Twitter bootstrap accordion collapse function

I am using twitter bootstrap css and js frameworks. In this example I have two collapsible divs, and .
Currently both divs can be expanded at the same time.
The way I would like them to work is so only one div can be expanded at a time. E.g. if #about is expanded and the user clicks #videos, #about will be collapsed and #videos will be expanded in its place.
Is there an easy way to do this?
<div id="main" class="span12">
<div class="row">
<div class="span4">
<a href="#" data-target="#about" data-toggle="collapse">
<div class="unit red bloat">
<h3>About</h3>
<p>A Melbourne based social clan who enjoy a range of MMO, RTS and action based titles. Take a look at what we're all about.</p>
</div>
</a>
</div>
<div class="span4">
<a href="#" data-target="#videos" data-toggle="collapse">
<div class="unit red bloat">
<h3>Videos</h3>
<p>A selection of our best videos, of both the good times and the bad. Due to the poor nature of it's content, viewer discretion is advised and should not be viewed by anyone. </p>
</div>
</a>
</div>
<div class="span4">
<a href="forums/index.php">
<div class="unit grey bloat">
<h3>Forum</h3>
<p>If you think you'd fit in here, click this box and sign up to our forum. </p>
</div>
</a>
</div>
</div><!-- end row -->
<br />
<br />
<div class="row-fluid">
<div class="span12">
<!-- start accord -->
<div id="about" class="collapse">
<div class="row-fluid">
<div class="expanded">
<p>about</p>
</div>
</div>
</div>
<div id="videos" class="collapse">
<div class="row-fluid">
<div class="expanded">
<p>vid</p>
</div>
</div>
</div>
<!-- end accord -->
</div>
</div>
<hr><!-- Bottom border -->
</div> <!-- /container -->

I was able to make it work by following the bootstrap example. Had to use the data-parent tag instead of data-target.
Here is the working example;
<div id="main" class="span12">
<div class="row">
<div class="span4">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<div class="unit grey bloat">
<h3>Heading 1</h3>
<p>Paragraph 1</p>
</div>
</a>
</div>
<div class="span4">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<div class="unit grey bloat">
<h3>Heading 2</h3>
<p>Paragraph 2</p>
</div>
</a>
</div>
<div class="span4">
<a href="#">
<div class="unit grey bloat">
<h3>Heading 3</h3>
<p>Paragraph 3</p>
</div>
</a>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="expanded">
<p>Expanded 1</p>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<div class="expanded">
<p>Expanded 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /container -->