Блог

Мне нужно создать довольно простую таблицу с фотографиями членов нашей команды (всего 4). При нажатии на одно из этих изображений я хочу, чтобы под изображениями открывался «модальный (правильный термин?)» и включал их биографии, названия и т.д. Я включил свой приведенный ниже код в нечто, близкое к функциональному, но я не могу понять, как заставить одно закрываться, когда другое открывается должным образом.

   <script type="text/javascript">
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
    </script>

<div class="spoiler">
    <img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
    <div class="inner" style="display:none;">
    <h1>John Doe</h1>
    <p>President</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam. Nullam venenatis sit amet massa eget bibendum. Maecenas odio mi, tristique et viverra ac, ornare id enim. Aliquam et felis nibh. Etiam pharetra, nisi a scelerisque consectetur, nibh quam volutpat dui, nec faucibus ante nunc vel nisi. Fusce rutrum tempor auctor. Donec feugiat tellus in feugiat ultrices. Nulla et neque tristique, dictum metus in, dapibus eros. Duis interdum erat eget pellentesque tristique.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

<div class="spoiler">
    <img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
    <div class="inner" style="display:none;">
    This is a spoiler!
    </div>
</div>

<div class="spoiler">
    <img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
    <div class="inner" style="display:none;">
    This is a spoiler!
    </div>
</div>

<div class="spoiler">
    <img onclick="showSpoiler(this);" src="https://via.placeholder.com/300" />
    <div class="inner" style="display:none;">
    This is a spoiler!
    </div>
</div>
  

JSFIDDLE:https://jsfiddle.net/hLkgcqxr/1

Мои идеи заключаются в том, что когда пользователь нажимает «1», она открывается ниже, а когда они нажимают «2», она меняется на биографию пользователя 2.

Пожалуйста, дайте мне знать, если потребуется какая-либо дополнительная информация, чтобы подтолкнуть меня в правильном направлении — я знаю, это может немного сбить с толку 🙂

Эта логика основана на правиле css, которое делает внутренние элементы скрытыми до тех пор, пока родительский спойлер не имеет класса active.

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

 var $spoilers = $('.spoiler').on('click', '.outer', function(e){
  $spoilers.removeClass('active');
  $spoilers.has(e.target).addClass('active');
});  

 .spoiler:not(.active) .inner { display: none; }  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spoiler">
    <img class="outer" src="https://via.placeholder.com/300" />
    <div class="inner">
    <h1>John Doe</h1>
    <p>President</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere tempus odio, in ornare lacus pulvinar quis. Aliquam sed risus non nisi euismod dignissim quis quis diam. Nullam venenatis sit amet massa eget bibendum. Maecenas odio mi, tristique et viverra ac, ornare id enim. Aliquam et felis nibh. Etiam pharetra, nisi a scelerisque consectetur, nibh quam volutpat dui, nec faucibus ante nunc vel nisi. Fusce rutrum tempor auctor. Donec feugiat tellus in feugiat ultrices. Nulla et neque tristique, dictum metus in, dapibus eros. Duis interdum erat eget pellentesque tristique.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

<div class="spoiler">
    <img class="outer" src="https://via.placeholder.com/300" />
    <div class="inner">
    This is a spoiler!
    </div>
</div>

<div class="spoiler">
    <img class="outer" src="https://via.placeholder.com/300" />
    <div class="inner">
    This is a spoiler!
    </div>
</div>

<div class="spoiler">
    <img class="outer" src="https://via.placeholder.com/300" />
    <div class="inner">
    This is a spoiler!
    </div>
</div>