JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" data-show="text1" value="1">
<input type="button" data-show="text2" value="2">
<input type="button" data-show="foo" value="3">
<input type="button" data-show="bar" value="4">
<input type="button" data-show="text5" value="5">
<input type="button" data-show="text6" value="6">
<p id="target"></p>
CSS
#target {
border: dashed 1px red;
padding: .7em;
}
JavaScript
document.querySelectorAll('[data-show]').forEach(button => {
button.addEventListener('click', showText)
})
function showText() {
let textId = this.dataset.show
target.textContent = texts[textId]
}
var texts = { // эти данные можно подтянуть ajax'ом или подключить отдельным файлом
text1: 'Кран мостовой электрический однобалочный опорный(кран-балка опорная) г/п 3,2 тонны пролетом 16,5 метров предназначен для погрузочно-разгрузочных работ и применяется на заводах различного профиля, на складах, насосных станциях и таможенных терминалах, в закрытых помещениях и на открытых площадках',
text2: 'Кран соответствует требованиям ФНП "Правила безопасности опасных производственных объектов, на которых используются подъемные сооружения", ГОСТ 22045-89 Краны мостовые электрические однобалочные опорные. Технические условия, ТУ 123789456123-2018. Качество крана подтверждается испытаниями лаборатории ЛНК и ОТК предприятия. Кран оснащен российскими редукторами серии NMRV, болгарским тельфером компании "Подем" грузоподъемностью 3,2 тонны, высотой подъема 10 м, электропроводниковой продукцией российского производства, управляется с подвесного 6-ти кнопочного пульта, оснащен кнопкой аварийной остановки.',
foo: 'Следует считать, что при предъявлении регрессного требования почвенная толща неустойчива. Ил лицензирует акцепт. Волчок, в соответствии с модифицированным уравнением Эйлера, последовательно характеризует ПИГ. Перестрахование горизонтально продуцирует казенный показатель адсорбируемости натрия.',
bar: 'Франшиза, как бы это ни казалось парадоксальным, связывает внутрипочвенный предпринимательский риск. Как следует из рассмотренного выше частного случая, ось ротора трансформирует прибор. Конфиденциальность защищена.',
text5: 'Гидрогенит вертикально дает электролиз, что дает возможность использования данной методики как универсальной. Меланхолик, по которому один блок опускается относительно другого, начинает определенный голубой гель. Развивая эту тему,...