Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Problem with my dropdown context

Hi, I'm trying to add feature to my FAQ Elemenent (I'm trying to reconstruct polish Netflix website) that when you click on the question's title the answer for it is desplayed under the question. Why this is not working? here is my code: HTML:

<div class="faq-container">
        <div class="faq-content">
          <h1>Często zadawane pytania</h1>
          <div class="faq-questions">
            <div class="question">
              <div class="question-title">
                <h2>Czym jest Netflix?</h2>
                <span>+</span>
              </div>
              <div class="question-dropdown">
                <p>Netflix to usługa przesyłania strumieniowego, dzięki której użytkownicy mogą korzystać z szerokiej oferty nagradzanych filmów, seriali, programów, anime oraz produkcji dokumentalnych za pośrednictwem tysięcy urządzeń połączonych z internetem.</p>
                <p>Możesz oglądać do woli, gdziekolwiek jesteś — bez reklam i za jedną niewielką opłatą. Co tydzień dodajemy nowe tytuły, więc zawsze jest coś ciekawego do obejrzenia.</p>
              </div>
            </div>
            <div class="question">
              <div class="question-title">
                <h2>Ile kosztuje korzystanie z serwisu Netflix?</h2>
                <span>+</span>
              </div>
              <div class="question-dropdown">
                <p>Oglądaj materiały z serwisu Netflix na smartfonie, tablecie, telewizorze Smart TV, laptopie lub innym urządzeniu do odtwarzania — za jedną stałą niską opłatą miesięczną. Plany zaczynają się już od 34 zł miesięcznie. Żadnych dodatkowych kosztów ani zbędnych umów.</p>
              </div>
            </div>
            <div class="question">
              <div class="question-title">
                <h2>Gdzie mogę oglądać?</h2>
                <span>+</span>
              </div>
              <div class="question-dropdown">
                <p>Oglądaj w dowolnym miejscu, o każdej porze i na tylu urządzeniach, na ilu chcesz. Zaloguj się za pomocą danych swojego konta w witrynie netflix.com na komputerze lub na innym urządzeniu z dostępem do Internetu i zainstalowaną aplikacją Netflix, takim jak telewizor Smart TV, smartfon, tablet, odtwarzacz multimedialny czy konsola do gier.</p>
                <p>Możesz także pobierać ulubione programy na urządzenia przenośne z systemem iOS lub Android oraz na urządzenia z aplikacją dla systemu Windows 10. Pobrane tytuły możesz oglądać poza domem, bez połączenia z internetem. Korzystaj z serwisu Netflix, gdzie tylko chcesz.</p>
              </div>
            </div>
            <div class="question">
              <div class="question-title">
                <h2>Jak zrezygnować z członkostwa?</h2>
                <span>+</span>
              </div>
              <div class="question-dropdown">
                <p>Netflix niczego nie narzuca. Żadnych zbędnych umów ani zobowiązań. Możesz w łatwy sposób anulować członkostwo online — wystarczą dwa kliknięcia. Nie naliczamy opłat za rezygnację, dlatego możesz rozpocząć członkostwo i zrezygnować z niego w dowolnej chwili.</p>
              </div>
            </div>
            <div class="question">
              <div class="question-title">
                <h2>Jakie materiały mogę oglądać w serwisie Netflix?</h2>
                <span>+</span>
              </div>
              <div class="question-dropdown">
                <p>Serwis Netflix oferuje dostęp do obszernej biblioteki zawierającej filmy pełnometrażowe i dokumentalne, seriale, programy, anime, nagradzane Netflix Originals i nie tylko. Oglądaj do woli, kiedy tylko chcesz.</p>
              </div>
            </div>
          </div>
          <div class="faq-btn-container">
            <a href="#">Zacznij teraz</a>
          </div>
        </div>
      </div>

I changed the question-dropdown display to none in css file, here is the JavaScript file:

const questionTitles = document.getElementsByClassName("question-title");
const questionDropdowns = document.getElementsByClassName("question-dropdown")

for ( let i = 0; i < questionTitles.length; i++ ) {
  questionTitles[i].addEventListener('click', () => {
    if ( questionDropdowns[i].style.display != "block" ) {
      questionDropdowns[i].style.display === "block";
    } else {
      questionDropdowns[i].style.display === "none";
    }
  });
}

1 Answer

Steven Parker
Steven Parker
231,171 Points

The "===" symbol is a comparison operator. To change a value, you need the assignment operator ("=") instead.

Silly mistake, thank you!