Bootstrap 4导航栏崩溃隐藏打开其他人

Question

我制作了一个在移动视图中折叠的导航栏，带有4个图标/按钮。

当我按下一个按钮时它会完美展开，但是当我按下第二个按钮时，第一个按钮会保持展开状态。我想隐藏它，所以它只显示一个扩展区域（因此在图片中隐藏“inloggen”当使用按下搜索时）。

  

这是显示我目前所拥有的标记：

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark justify-content-center navigatie-balk">
    <div class="container d-flex flex-wrap">
        <!--- logo --->
        <div class="justify-content-start" id="div-logo">
            <a class="navbar-brand" href="<?php echo $this->url('home'); ?>" target="_self">
                <img src="<?= $this->basePath('img/logo.png') ?>"/>
            </a>
        </div>
        <!-- buttons/hamburger menu -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#button1" style="margin-top: 12px;">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#div-zoeken" style="margin-top: 12px;">
                <span class="navbar-toggler-icon" id="zoeken-toggle"></span>
            </button>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#inloggen" style="margin-top: 12px;">
                <span class="navbar-toggler-icon" id="inloggen-toggle"></span>
            </button>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#plaatsen" style="margin-top: 12px;">
                <span class="navbar-toggler-icon" id="plaatsen-toggle"></span>
            </button>                
        <!-- Zoeken -->
        <div class="collapse navbar-collapse justify-content-center" id="div-zoeken">
            <ul class="navbar-nav">
            <li class="nav-item active">
                <form class="navbar-form" role="search">
                    <div class="input-group" style="height: 30px;">
                        <input type="text" class="form-control" placeholder="Zoeken..." style="border: none;width: 250px;">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-light" style="border-radius: 0px 3px 3px 0px;padding:0px 5px 3px 5px;height: 30px;"><img src="<?= $this->basePath('img/magnifying-glass-6x.png') ?>" style="height: 16px;"/></button>                
                        </span>
                    </div>
                </form>
            </li>
            </ul> 
        </div>
        <!--- plaatsen en inloggen -->
        <div class="flex-column justify-content-end" id="div-plaatsen">
            <button type="button" class="btn btn-light btn-primary btn-sm" id="advertentie-plaatsen" style="height: 25px; padding:0px 10px 0px 10px;">Advertentie plaatsen</button>
            <div class="collapse navbar-collapse" id="plaatsen" style="float: left;">
                <ul class="nav navbar-nav" style="font-size: 14px;">
                    <li class="nav-item active" id="plaatsen-link">
                        <a class="nav-link"href="#"><img src="<?= $this->basePath('img/plaatsen-advertentie.png') ?>">&nbsp;&nbsp;Advertentie plaatsen<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link"href="#"><img src="<?= $this->basePath('img/briefcase.png') ?>">&nbsp;&nbsp;Bedrijfsvermelding<span class="sr-only">(current)</span></a>
                    </li>
                </ul>    
            </div>
            <div class="collapse navbar-collapse" id="inloggen" style="float: right;">
                <ul class="nav navbar-nav" style="font-size: 14px;">
                    <li class="nav-item active">
                        <a class="nav-link" href="<?= $this->basePath('inloggen') ?>"><img src="<?= $this->basePath('img/person-2x.png') ?>">&nbsp;&nbsp;Inloggen<span class="sr-only">(current)</span></a>
                    </li>
                </ul>
            </div>
        </div>    
    </div>
</nav>