JS появление текст при клике, несколько кнопок

Question

Есть, допустим, три кнопки. При клике на одну из, справа должен появляться текст. У каждого элемента свой текст. Как это реализовать на jquery или js? Прошу помочь, проблема в том, что никак не могу понять, как обратиться к нужному элементу при клике на конкретный элемент, если классы повторяются. Гуглил, но мне важнее понять, чем сделать

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="intro">
    <div class="intro_inner">
        <div class="press">PRESS HERE</div>
    </div>
        <div class="hidden_text">TEXT 1</div>
    <div class="intro_inner">
        <div class="press">PRESS HERE</div>
    </div>
        <div class="hidden_text">TEXT 2</div>
    <div class="intro_inner">
        <div class="press">PRESS HERE</div>
    </div>
        <div class="hidden_text">TEXT 3</div>
</div>

CSS

.intro {
    display: flex;
}

.intro_inner {
    width: 400px;
    height: 400px;
    background-color: red;
    margin-right: 20px;
}

.press {
    display: flex;
    justify-content: center;
    background-color: green;
    cursor: pointer;
}

.hidden_text {
    display: none;
}

Answer 1

Обрати внимание! Я немного изменил структуру html. Засунул блоки с текстом внутрь общего контейнера, чтобы проще было искать нужные элементы. Теперь таких блоков можно наделать хоть тыщщу и для всех использовать эти 3 строчки кода на JS.

// сначала выберем все кнопки. Поскольку структура однотипная для
// каждого контейнера, то это хороший вариант. Используем деструктуризацию
// для более короткой записи
[...document.querySelectorAll('.press')].forEach(btn => {
  // затем каждой кнопке в цикле (forEach) вешаем слушателя
  // события 'click'
  btn.addEventListener('click', () => {
    // Выбираем элемент с текстом вот таким образом: 
    // 1. Сначала берем родителя кнопки (btn.parentNode)
    // 2. Затем выбираем из коллекции детей второго (btn.parentNode.children[1])
    // 3. Потом даём стиль display = 'block'
    btn.parentNode.children[1].style.display = 'block';
  })
});

.intro {
    display: flex;
}

.intro_inner {
    width: 400px;
    height: 400px;
    background-color: red;
    margin-right: 20px;
}

.press {
    display: flex;
    justify-content: center;
    background-color: green;
    cursor: pointer;
}

.hidden_text {
    display: none;
}

<div class="intro">
    <div class="intro_inner">
      <div class="press">PRESS HERE</div>
      <div class="hidden_text">TEXT 1</div>
    </div>
    
    <div class="intro_inner">
      <div class="press">PRESS HERE</div>
      <div class="hidden_text">TEXT 2</div>
    </div>
    
    <div class="intro_inner">
      <div class="press">PRESS HERE</div>
      <div class="hidden_text">TEXT 3</div>
    </div> 
</div>

Answer 2

Чтобы обратиться к нужному элементу при клике на конкретный элемент, если классы повторяются, используйте this:

$('.press').click(function(){
  $(this).parent().next('.hidden_text').css('display','block')
})

.intro {
    display: flex;
}

.intro_inner {
    width: 400px;
    height: 400px;
    background-color: red;
    margin-right: 20px;
}

.press {
    display: flex;
    justify-content: center;
    background-color: green;
    cursor: pointer;
}

.hidden_text {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="intro">
    <div class="intro_inner">
        <div class="press">PRESS HERE</div>
    </div>
        <div class="hidden_text">TEXT 1</div>
    <div class="intro_inner">
        <div class="press">PRESS HERE</div>
    </div>
        <div class="hidden_text">TEXT 2</div>
    <div class="intro_inner">
        <div class="press">PRESS HERE</div>
    </div>
        <div class="hidden_text">TEXT 3</div>
</div>

БЛОГ НА HUSL

JS появление текст при клике, несколько кнопок

Ответы (2 шт):