Bootstrap Accrdion面板不起作用？

Question

I am trying to create Accordion style panels for a clients website but this is my first time trying to set up accordion panels and it does not seem to be working. I am unsure if I am using this code correctly. I have tried using panels as infrastructure and without but neither seem to work. Can someone please explain how to make bootstrap accordion collapse areas with an emphasis on the kinds of relationships that must be in place. More importantly, am I using it incorrectly or am I forgetting something that it isnt working Accordion style?

HTML (Sorry in advance. There is a lot of code lol):

<!-- Active Pureness START -->
<div class="row" style="margin-top: 90px;">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row" id="Active_Pureness_Wrapper">
            <div id="Active_Pureness_Banner">
                <img class="img-responsive" src="assets/Active_Pureness/Active_Pureness_Banner.jpg">
            </div>
            <div id="Active_Pureness_Overlay">
                <p id="Active_Pureness_Overlay_Title">Active Pureness</p>
                <button id="Active_Pureness_Button" data-toggle="collapse" data-target="#Active_Pureness_Block">Read More...</button>
            </div>
            <div id="Active_Pureness_Hidden" class="collapse">

            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row">
            <div id="Active_Pureness_Block" class="collapse">
                <!-- Active Pureness Products START -->
                <button type="button" class="btn btn-default Button_Exit pull-right" data-toggle="collapse" data-parent="#Accordian_group" data-target="#Active_Pureness_Block">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
            </div>
        </div>
    </div>
</div>
<!-- Active Pureness END -->
<!-- Hydramemory START -->
<div class="row" style="margin-top: 10px;">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row" id="Hydramemory_Wrapper">
            <div id="Hydramemory_Banner">
                <img class="img-responsive" src="assets/Hydramemory/Hydramemory_Banner.jpg">
            </div>
            <div id="Hydramemory_Overlay">
                <p id="Hydramemory_Overlay_Title">Hydramemory</p>
                <button id="Hydramemory_Button" data-toggle="collapse" data-target="#Hydramemory_Block">Read More...</button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row">
            <div id="Hydramemory_Block" class="collapse">
                <!-- Hydramemory Products START -->
                <button type="button" class="btn btn-default Button_Exit pull-right" data-toggle="collapse" data-parent="#Accordian_group" data-target="#Hydramemory_Block">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
                <!-- Hydramemory Products END -->
            </div>
        </div>
    </div>
</div>
<!--Hydramemory END -->
<!-- Renight START -->
<div class="row" style="margin-top: 10px;">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row" id="Renight_Wrapper">
            <div id="Renight_Banner">
                <img class="img-responsive" src="assets/Renight/Reignight_Banner.jpg">
            </div>
            <div id="Renight_Overlay">
                <p id="Renight_Overlay_Title">Renight</p>
                <button id="Renight_Button" data-toggle="collapse" data-target="#Renight_Block">Read More...</button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row">
            <div id="Renight_Block" class="collapse">
                <!-- Renight Products START -->
                <button type="button" class="btn btn-default Button_Exit pull-right" data-toggle="collapse" data-parent="#Accordian_group" data-target="#Renight_Block">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
                <!-- Renight Products END -->
            </div>
        </div>
    </div>
</div>
<!-- Renight END -->
<!-- Sacred Nature START -->
<div class="row" style="margin-top: 10px;">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row" id="Sacred_Nature_Wrapper">
            <div id="Sacred_Nature_Banner">
                <img class="img-responsive" src="assets/Sacred_Nature/Sacred_Nature_Banner.jpg">
            </div>
            <div id="Sacred_Nature_Overlay">
                <p id="Sacred_Nature_Overlay_Title">Sacred Nature</p>
                <button id="Sacred_Nature_Button" data-toggle="collapse" data-target="#Sacred_Nature_Block">Read More...</button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row">
            <div id="Sacred_Nature_Block" class="collapse">
                <!-- Sacred Nature Products START -->
                <button type="button" class="btn btn-default Button_Exit pull-right" data-toggle="collapse" data-parent="#Accordian_group" data-target="#Sacred_Nature_Block">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
                <!-- Sacred Nature Products END -->
            </div>
        </div>
    </div>
</div>
<!-- Sacred Nature END -->
<!-- Sublime Skin START -->
<div class="row" style="margin-top: 10px;">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row" id="Sublime_Skin_Wrapper">
            <div id="Sublime_Skin_Banner">
                <img class="img-responsive" src="assets/Sublime_Skin/Sublime_Skin_banner.jpg">
            </div>
            <div id="Sublime_Skin_Overlay">
                <p id="Sublime_Skin_Overlay_Title">Sublime Skin</p>
                <button id="Sublime_Skin_Button" data-toggle="collapse" data-parent="#Accordian_group" data-target="#Sublime_Skin_Block">Read More...</button>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1">
        <div class="row">
            <div id="Sublime_Skin_Block" class="collapse">
                <!-- Sublime Skin Products START -->
                <button type="button" class="btn btn-default Button_Exit pull-right" data-toggle="collapse" data-target="#Sublime_Skin_Block">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
                <!-- Sublime Skin Products END -->
            </div>
        </div>
    </div>
</div>
<!-- Sublime Skin END -->

Answer 1

Turns out I had the wrong html structure for the accordion panel. The first commenter posted a link to the correct documentation.