Показать другой div по какой ссылке я нажимаю

Question

На моей странице html я сделал четыре разных ссылки вверху. Под этим у меня есть четыре div-элемента. На странице загрузки я хочу, чтобы все они были скрыты.

Теперь моя проблема. Я хочу, чтобы элементы div отображались с эффектом скользящего перехода, когда я нажимаю на ссылки. Поэтому, если я нажму на «Show Blue», div с id = «blue» скользит вниз и становится видимым. Если я затем нажму на другую ссылку, например, «Показать зеленый», видимый div скользит вверх, а выбранный теперь скользит вниз и становится видимым и т. Д.

Я пробовал с некоторым js onClick, но я могу Надеюсь, что некоторые из вас могут мне помочь.

* {
  margin: 0;
}

.content_holder {
  width: 100%;
  background-color: #bfdc37;
  height: 100px;
}

a {
  margin: 20px;
}

.color {
  width: 100%;
  background-color: #bfdc37;
  height: 100px;
  display: none;

}

    <div class="content_holder">
        <div class="box" id="box1">
            <a href="#">Show Blue</a>
        </div>

        <div class="box" id="box2">
            <a href="#">Show Red</a>
        </div>

        <div class="box" id="box3">
            <a href="#">Show Yellow</a>
        </div>

        <div class="box" id="box4">
            <a href="#">Show Green</a>
        </div>
    </div>

    <div class="color" id="blue">
        This box says blue
    </div>

    <div class="color" id="red">
        This box says red
    </div>

    <div class="color" id="yellow">
        This box says yellow
    </div>

    <div class="color" id="green">
        This box says green
    </div>

Answer 1

Это легко сделать с jQuery. Вы можете кодировать свои анимированные открытия и закрытия.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script>
        $(document).ready(function(){
            $(".box").click(function(){
                $(".color").css("display", "none");
                var data = $(this).attr("data");
                $('.color[id='+data+']').css("display", "inline");
            });
        });
    </script>

Я только что добавил атрибут data в divs.

        <div class="box" id="box1" data="blue">
            <a href="#">Show Blue</a>
        </div>

        <div class="box" id="box2" data="red">
            <a href="#">Show Red</a>
        </div>

        <div class="box" id="box3" data="yellow">
            <a href="#">Show Yellow</a>
        </div>

        <div class="box" id="box4" data="green">
            <a href="#">Show Green</a>
        </div>
    </div>

    <div class="color" id="blue">
        This box says blue
    </div>

    <div class="color" id="red">
        This box says red
    </div>

    <div class="color" id="yellow">
        This box says yellow
    </div>

    <div class="color" id="green">
        This box says green
    </div>