Здравствуйте. Я только начал изучать js и понимаю в нём ровно ничего. Вынудила вёрстка, т.к. на макете несколько кнопок, которые скрывают/показывают контент. Дедлайна нет, так что времени на решение хватает. Так вот.
Верстаю лендинг и на главной странице лендинга 6 кнопок, которые раскрывают/скрывают контент. Пару лекций по js посмотрел, немного понял, как писать функции. Написал скрипт для первой кнопки, которая показывает по нажатию скрытый текст и меняет надпись с read me на hide. Идентично первому, написал скрипт для второй, но почему то при нажатии на вторую кнопку открывается первая, что бы я не делал.
Попробовать создать новый js файл и написать в нём и ура, кнопка заработала корректно. Как я понимаю, это не самый лучший способ повторения скрипта. Не могли бы вы сказать, как написать все скрипты в одном файле js?
html
<h2 class="heading1--we_are_best">WE ARE BEST</h2>
<p class="section-heading1--text">
Lorem ipsum dolor mero moleamet,
soluta euism od isea, hiea unereusams
ullu tpamco detore aer rper quo, utam
signiferuuue uo. Brute inani in prom in
<span class="content hidden">Lorem ipsum dolor mero moleamet,
soluta euism od isea, hiea unereusams
ullu tpamco detore aer rper quo, utam
signiferuuue uo. Brute inani in prom in</span></p>
<button class="btn" type="button">READ MORE</button>
java
const btn = document.querySelector(".btn");
const content = document.querySelector(".content");
btn.addEventListener("click", btnClick);
function btnClick() {
console.log(content.classList);
if (content.classList.contains("hidden")) {
btn.textContent = "HIDE";
} else {
btn.textContent = "READ MORE";
}
content.classList.toggle("hidden");
}
html
<p class="sectiong-heading4--text">Lorem ipsum dolor mero moleamet,
soluta euism od isea, hiea unereusams
ullu tpamco detore aer rper quo,utam
signiferuuue uo. Brute inani in
<span class="content-portfolio hidden-portfolio">Lorem ipsum dolor mero moleamet,
soluta euism od isea, hiea unereusams
ullu tpamco detore aer rper quo,utam
signiferuuue uo. Brute inani in</span></p>
<button class="btn-portfolio">READ MORE</button>
java
const btnPortfolio = document.querySelector(".btn-portfolio");
const contentPortfolio = document.querySelector(".content-portfolio");
btnPortfolio.addEventListener("click", btnClickFuture);
function btnClickFuture() {
console.log(contentPortfolio.classList);
if (contentPortfolio.classList.contains("hidden-portfolio")) {
btnPortfolio.textContent = "HIDE";
} else {
btnPortfolio.textContent = "READ MORE";
}
contentPortfolio.classList.toggle("hidden-portfolio");
}
html
<div class="flex-item1">Lorem ipsum dolor mero moleamet, soluta euism od
isea, hiea unereusams ullu tpamco detore aer rper
quo,utam signiferuuue uo. Brute inani in prom in.Lorem
ipsum dolor mero moleamet, soluta euism od
<span class="content-flex1 hidden-flex1">Lorem ipsum dolor mero moleamet, soluta euism od
isea, hiea unereusams ullu tpamco detore aer rper
quo,utam signiferuuue uo. Brute inani in prom in.Lorem
ipsum dolor mero moleamet, soluta euism od</span>
<button class="btn-testimonials1 btn">READ MORE</button>
</div>
java
const btnTestimonials = document.querySelector(".btn-testimonials1");
const contentFlex1 = document.querySelector(".content-flex1");
btnTestimonials.addEventListener("click", btnClickTestimonials);
function btnClickTestimonials() {
console.log(contentFlex1.classList);
if (contentFlex1.classList.contains("hidden-flex1")) {
btnTestimonials.textContent = "HIDE";
} else {
btnTestimonials.textContent = "READ MORE";
}
contentFlex1.classList.toggle("hidden-flex1");
}
Ещё есть место на сайте, где 1 кнопка открывает сразу два текстовых блока. Нашёл в интернете способ, который помог, но при нажатии кнопка меняет название на HIDE(когда текст показан), но когда нажимаешь на неё и текст скрывается, название не меняется обратно на READ MORE. Коды приложу.
html
<div class="section-div--feature">
<h3 class="section-div-heading--feature">FEATURE</h3>
<p class="section-div--feature--text">
Lorem ipsum dolor mero moleamet, soluta
euism od isea, hiea unereusams ullu
tpamco detore aer rper quo, utam sig
-niferuuue uo. Brute inani in prom in.Lorem
<span class="hidden-about_us content_about_us">Lorem ipsum dolor mero moleamet, soluta
euism od isea, hiea unereusams ullu
tpamco detore aer rper quo, utam sig
-niferuuue uo. Brute inani in prom in.Lorem</span></p>
</div>
<img src="/images/future_line.png" alt="white-line" class="future_line">
<div class="section-div--about_us">
<h3 class="section-div-heading--about_us">ABOUT US</h3>
<p class="section-div--about_us--text">
Lorem ipsum dolor mero moleamet, soluta
euism od isea, hiea unereusams ullu
tpamco detore aer rper quo, utam sig
-niferuuue uo. Brute inani in prom in.Lorem
<span class="hidden-about_us content_about_us">Lorem ipsum dolor mero moleamet, soluta
euism od isea, hiea unereusams ullu
tpamco detore aer rper quo, utam sig
-niferuuue uo. Brute inani in prom in.Lorem</span></p>
</div>
<button class="btn-lorem_ipsum">READ MORE</button>
java
let btnAboutUs = document.querySelector(".btn-lorem_ipsum");
let contentAboutUs = document.querySelectorAll(".content_about_us");
btnAboutUs.addEventListener("click", btnClickAboutUs);
function btnClickAboutUs() {
for (let btnAboutUs of contentAboutUs) btnAboutUs.classList.toggle("hidden-about_us");
btnAboutUs.textContent = btnAboutUs.textContent === "READ MORE" ? "HIDE" : "HIDE";
}
Заранее спасибо всем ответившим. Если не затруднит, то объясните решение)