Развернуть одну складную кнопку, а другую скрыть?

Question

Здесь я имел дело с несколькими складными кнопками начальной загрузки. Я показывал содержимое одной складной кнопки по умолчанию в начале. Когда я нажимал другую свертываемую кнопку, она по-прежнему отображала содержимое первой кнопки.

Я использовал атрибут «data-parent». Но он не будет работать.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-sm">
     <ul class="navbar-nav">
        <li class="nav-item">
            <button data-toggle="collapse" data-target="#all" class="active">ALL</button>
        </li>
        <li class="nav-item">
            <button data-toggle="collapse" data-target="#tv">TV</button>
        </li>
        <li class="nav-item">
            <button data-toggle="collapse" data-target="#internet">INTERNET</button>
        </li>
        <li class="nav-item">
            <button data-toggle="collapse" data-target="#wireless">WIRELESS</button>
        </li>
        <li class="nav-item">
            <button data-toggle="collapse" data-target="#bundle">BUNDLES</button>
        </li>
    </ul>
</nav>
<div id="all" data-parent="#deal">
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <img src="images/tv.jpg" alt="tv">
            <h5>Product Deal-01</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            <a href="#">Check Availablity <img src="images/arrow2.jpg" alt="arrow2"></span></a>
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="images/internet.jpg" alt="internet">
            <h5>Product Deal-02</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            <a href="#">Check Availablity <img src="images/arrow2.jpg" alt="arrow2"></span></a>
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="images/wireless.jpg" alt="wireless">
            <h5>Product Deal-03</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            <a href="#">Check Availablity <img src="images/arrow2.jpg" alt="arrow2"></span></a>
        </div>
        <div class="col-sm-6 col-md-3">
            <img src="images/bundle.jpg" alt="bundle">
            <h5>Product Deal-04</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            <a href="#">Check Availablity <img src="images/arrow2.jpg" alt="arrow2"></span></a>
        </div>
    </div>