Как убрать один div при нажатии на него и показать скрытый div jquery?

Question

[Tamara Evpraksina]

Всем здравствуйте. Помогите решить проблему.
На странице отображаются два div с class="test" , третий div с id="offres" скрыт изначально.
Я хочу при нажатии на div с class="test" прятать их и взамен, чтобы появлялся div с id="offres".
В моем коде, при нажатии на div с class="test" появляется div с id="offres" , но не убираются div с class="test" остаются все три.
Подскажите в чем моя ошибка, заранее благодарю.

<div class="container">
        <div class="row row_2">
            <div class="d-sm-none d-none d-md-block col-md-6 test" style="height: 150 px;">
            </div>
            <div class="clearfix"></div>
            <div class="col-12 col-md-6" id="offres" style="height: 250px; display: none;">
            </div>
            <div class="d-sm-none d-none d-md-block col-md-6 test" style="height: 150px;">

для JQuery

$(document).ready(function() {
    console.log("ready!");
    $(".test").click(function() {
        $(".test").hide();
        $("#offres").show();
    });
});

Comments

[Антон Литвиненко]

скорее всего в разметке, в вашем скрипте сложно чтото напутать

[Ankhena]

У вас незакрытые div в разметке.
И все работает даже так.
https://jsfiddle.net/no4dh7tr/

А что не работает у вас?

[Tamara Evpraksina]

Ankhena, добрый вечер на самом деле скобки везде закрыты. не скопировала весь код.
дело в том что у меня 3 разные колонки, 1 из них спрятана. Я хочу что6ы при нажатии на .test ( он убирался из вида и на его месте появлялся #offres).
у меня остаются все 3.

[Tamara Evpraksina]

хотела приложить фото, но не идет загрузка файла

[Tamara Evpraksina]

<div class="container">
    <div class="row row_2">
       
        <div class="d-sm-none d-none d-md-block col-md-6 test" style="height: 150 px;">
            <div class="col-26">
                <p class="p_26"> <b>Poste:</b> Carreleur H/F
                </p>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="col-12 col-md-6" id="offres" style="height: 250px; display: none;">
            <div class="col-26">
                <h6 class="h_27">Carreleur H/F</h6>
                <p class="p_26"><b>6 decembre 2020, Strasbourg-67</b> 
                </p>
                <button class="btn ml-3 mb-3" type="submit">Postuler</button>
            </div>
        </div>
        <div class="d-sm-none d-none d-md-block col-md-6 test" style="height: 150px;">
            <div class="col-26">
                <p class="p_26"> <b>Poste:</b> Carreleur H/F
                </p>
            </div>
        </div>
    </div>   
</div>

[Ankhena]

Tamy, Хорошо, вот с вашими закрытыми тегами:
https://jsfiddle.net/1s79axjn/
Всё ведь работает.

Значит, вы показываете не весь код.

[Tamara Evpraksina]

Ankhena, спасибо, cтранно но у меня не работает : ( В console ни каких ошибок не выдает....

[Ankhena]

Tamy, моя песочница не работает?

[Tamara Evpraksina]

Ankhena, Ваша работает отлично

[Ankhena]

Tamy, Тогда нужно попытаться сделать свою.
Очень вероятно, что пока будете делать, увидите в чем проблема. Если нет, будем искать вместе.

[Tamara Evpraksina]

Ankhena, завтра буду пробовать сегодня изучала Mongodb, Json... вместе с подключением

А вот JS и JQUERY мне надо еще многому научиться, это мой первый опыт.