nested accordion -show border only for first parent bootstrap 3

Question

I have nested accordion as below:-

<div class="tab-pane" id="Products" role="tabpanel" aria-labelledby="Products-tab">
                    <a class="btn btn-link" role="link" href="#" onclick="ShowNew();"> + Add New Product</a>
                    <div class="panel panel-primary">
                        <div class="panel-heading clickable">
                            <h3 class="panel-title">
                                <span><i class="glyphicon glyphicon-minus"></i> CG6300</span>
                            </h3>
                        </div>
                        <div class="panel-body">
                            <a class="btn btn-link" role="link" href="#" onclick="ShowNew();"> + Add New Version</a>

                            <div class="panel panel-primary">
                                <div class="panel-heading clickable panel-collapsed">
                                    <h3 class="panel-title">
                                        <span><i class="glyphicon glyphicon-minus"></i> V0100</span>
                                    </h3>
                                </div>
                                <div class="panel-body">
                                    <a class="btn btn-link" role="link" href="#" onclick="ShowNew();"> + Add New Module</a>
                                    <div class="panel panel-primary">
                                        <div class="panel-heading clickable panel-collapsed">
                                            <h3 class="panel-title">
                                                <span><i class="glyphicon glyphicon-minus"></i> Tilt</span>
                                            </h3>
                                        </div>
                                        <div class="panel-body">
                                            <a class="btn btn-link" role="link" href="#" onclick="ShowNew();"> + Add New Document</a>
                                            <div class="panel panel-primary">
                                                <div class="panel-heading clickable panel-collapsed">
                                                    <h3 class="panel-title">
                                                        <span><i class="glyphicon glyphicon-minus"></i> 123</span>
                                                    </h3>
                                                </div>
                                                <div class="panel-body">
                                                    Panel content
                                                </div>
                                            </div>
                                            <div class="panel panel-primary">
                                                <div class="panel-heading clickable panel-collapsed">
                                                    <h3 class="panel-title">
                                                        <span><i class="glyphicon glyphicon-minus"></i> 456</span>
                                                    </h3>
                                                </div>
                                                <div class="panel-body">
                                                    Panel content
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-primary">
                                <div class="panel-heading clickable panel-collapsed">
                                    <h3 class="panel-title">
                                        <span><i class="glyphicon glyphicon-minus"></i> V0200</span>
                                    </h3>
                                </div>
                                <div class="panel-body">
                                    Panel content
                                </div>
                            </div>


                        </div>
                    </div>

                    <div class="panel panel-primary">
                        <div class="panel-heading clickable">
                            <h3 class="panel-title">
                                <span><i class="glyphicon glyphicon-minus"></i> CG6301</span>
                            </h3>
                        </div>
                        <div class="panel-body">
                            Panel content
                        </div>
                    </div>
                </div>

What I need?

---

1. I want to remove borders for all the accordion but not for the first parent. So in screenshot only the parent accordion with text 'CG6300' and 'CG6301' need to show the border.

2. Need to right align all the child accordion to the first parent.

What I done so far?

---

For remove border I use style

.panel {
        border: 0;
    }

but it removes all border.

For the alignment, I don't know where to start.

Any help is much appreciated. I'm not good with CSS.

Answer 1

To remove the border of .panel children, but not a .panel parent:

.panel .panel {
    border: 0;
}

The .panel .panel selector applies styles only to elements with the panel class that are inside of a parent element that has the panel class. Alternatively, you could assign a new class to the child elements and target only that class with your border style.

For more information and examples of different kinds of CSS selectors, check out the list on W3Schools.

To align all the child accordions to the right edge of the parent accordion, you'll need to remove the right-side padding from the panel-body class:

.panel-body {
    padding-right: 0;
}

To arrive at this solution, you need to understand the CSS Box Model.