Bootstrap Accordion align to bottom of div - html

Question

Bootstrap newbie here.
I am having trouble getting an accordion to work as desired.
I want to achieve a similar look to the offers on the bottom of this site's slider: http://www.christchurch-harbour-hotel.co.uk/
I am struggling to get the divs to align to the bottom of the row so the accordion opens in an upwards direction. I also experienced problems with the positioning elements in the css where both the columns would overlap.
I'm sure it's just a small thing I am missing. Your help would really be appreciated.
Here is a link to the page I am working on: http://crystalsprings.co.za/newsite/
Here is the relevant html:
.specialblock1_header {
background-color: #df4351;
padding: 10px 15px 10px 15px;
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
font-size:1.2em;
height:100%;
text-align:left;
outline:none;
border:none;
}
.specialblock1_content {
background-color: #FFF;
padding: 10px 15px 10px 15px;
color:#000;
font-family:Tahoma, Geneva, sans-serif;
font-size:1em;
height:100%;
text-align:left;
}
.specialblock2_header {
background-color: #F96;
padding: 10px 15px 10px 15px;
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
font-size:1.2em;
height:100%;
text-align:left;
}
.accordian_row {
height:400px;
position: relative;
}
.accordian_row .panel-default{
position: absolute;
margin:0;
}
<div class="row accordian_row">
<div class="col-lg-4"></div>
<div class="col-lg-2">
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">Planning your honeymoon?</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body specialblock1_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse2">Romance in the misty mountains</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body specialblock1_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>

Answer 1

Try this CSS code:
.panel-collapse{
position: absolute;
bottom: 37px;
}
.accordion_row .panel-default{
position: relative;
margin:0;
}
Link to working fiddle bin:
Bootstrap Accordion align to bottom of div

Answer 2

You need the change the structure in html in order to achieve upward direction
The #collapse1 div should be put above the .panel-heading
demo
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body specialblock1_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div><div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapse1" class="collapsed" aria-expanded="false">Planning your honeymoon?</a>
</h4>
</div>
</div>
</div>

Answer 3

You can use table's property to achieve this -
Please see the inline styles I have used,
fiddle
<div class="row accordian_row" style="display: table; width: 100%;">
<div style="display: table-row;">
<div style="display: table-cell; height: 100%; vertical-align: bottom; float: none;" class="col-lg-4"></div>
<div style="display: table-cell; height: 100%; vertical-align: bottom; float: none;" class="col-lg-2">
<div id="accordion1" class="panel-group">
<div style="position: relative;" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a aria-expanded="true" class="" href="#collapse1" data-parent="#accordion1" data-toggle="collapse">Planning your honeymoon?</a>
</h4>
</div>
<div style="" aria-expanded="true" class="panel-collapse collapse in" id="collapse1">
<div class="panel-body specialblock1_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
<div style="display: table-cell; height: 100%; vertical-align: bottom; float: none;" class="col-lg-2">
<div id="accordion2" class="panel-group">
<div style="position: relative;" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a aria-expanded="true" class="" href="#collapse2" data-parent="#accordion2" data-toggle="collapse">Romance in the misty mountains</a>
</h4>
</div>
<div style="" aria-expanded="true" class="panel-collapse collapse in" id="collapse2">
<div class="panel-body specialblock1_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
<div style="display: table-cell; height: 100%; vertical-align: bottom; float: none;" class="col-lg-4"></div>
</div>
</div>

Answer 4

.accordian_row .panel-default {
position: absolute;
bottom: 0;
}
.collapse.in, .collapsing {
position: absolute !important;
bottom: 100%;
left: 0;
width: 100%;
}
.panel-group {
margin-bottom: 0;
}
try these codes. it should work fine.