вложенная граница аккордеона-show только для первой родительской начальной загрузки 3

Question

У меня есть вложенный аккордеон, как показано ниже: -

<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>

Что мне нужно?

---

1. Я хочу убрать границы для всего аккордеона, но не для первого родителя. Таким образом, на скриншоте только родительский аккордеон с текстом «CG6300» и «CG6301» должен показывать границу.

2. Необходимо выровнять по правому краю всю дочернюю гармошку с первым родителем

Что я сделал до сих пор?

---

Для удаления границы я использую стиль

.panel {
        border: 0;
    }

но он удаляет все границы.

Что касается выравнивания, я не знаю с чего начать.

Любая помощь очень ценится. Я не хорошо с CSS.

Answer 1

Чтобы удалить границу .panel детей, но не .panel родителя:

.panel .panel {
    border: 0;
}

Селектор .panel .panel применяет стили только к элементам с классом panel, которые находятся внутри родительского элемента с классом panel. В качестве альтернативы, вы можете назначить новый класс дочерним элементам и нацелить только этот класс с вашим стилем границы.

Для получения дополнительной информации и примеров различных видов селекторов CSS, посмотрите список в W3Schools .

Чтобы выровнять все дочерние аккордеоны по правому краю родительского аккордеона, вам необходимо удалить правый отступ из класса panel-body:

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

Чтобы прийти к этому решению, вам необходимо понять CSS Box Model .