rozwijalny tekst-porad

witam, zrobiłem coś takiego.

 <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><div class="button">
  jaki wybrać ..........? <input type="button" onclick="showSpoiler(this);" value="Pokaz/Ukryj"class="button"  />
  <div class="" style="display:none;">
tekst .....<hr/></div>

</div><div class="button">
  jaki wybrać material ......? <input type="button" onclick="showSpoiler(this);" value="Pokaz/Ukryj"class="button"  />
    <div class="" style="display:none;">
tekst................<hr/></div>

jak mógłbym to przerobić, bo jeśli umieszczę za dużo podpowiedzi, jeśli się rozwiną wyjada mi za stronę, chciałbym żeby po rozwinięciu jednej porady reszta się zamykała. Pozdrawiam i dziękuję.

A więc chcesz mieć zawsze co najwyżej 1 otwarty element?

Podam rozwiązanie odpowiednie pod względem wydajności, a także prostoty, gdy nie używa się bibliotek wspomagających manipulację DOM (np. jQuery) lub zaawansowanych API przeglądarek (np. querySelectorAll()).

Zapamiętuj ostatnio otwarty element (masz go w zmiennej obj, ale to myląca nazwa -- polecam zmienić na elem) w zmiennej globalnej, nazwanej np. lastOpenElem. Przy otwieraniu kolejnego elementu, najpierw zamknij ten ze zmiennej lastOpenElem.

Pamiętaj o kilku rzeczach:
-lastOpenElem powinieneś czyścić, gdy chowasz element -- bo skoro otwarty może być max 1, a właśnie jakiś element schowałeś, to żaden nie jest otwarty.
-lastOpenElem powinieneś ustawiać na nowy element tylko gdy właśnie jakiś element otworzyłeś. Tylko wtedy również powinieneś ukryć poprzednio otwarty element.
-Nazwa funkcji showSpoiler() jest słaba. Myląca. Funkcja ta NIE pokazuje spoilera. Ona pokazuje go lub ukrywa w zależności od tego, czy jest już pokazany, czy nie. Tradycyjnie, taka funkcja powinna nazywać się toggleSpoiler().
-Tak w ogóle, to może dobrze byłoby wydzielić funkcje showSpoiler(), hideSpoiler() i isSpoilerShown(), bo kod toggleSpoiler() nam się komplikuje.
-Dobry kawałek kodu nie używałby zmiennej globalnej lastOpenItem. Ograniczyłby jej zasięg, owijając nasze funkcje choćby w IIFE (google it!), przy czym wtedy nasze funkcje stałyby się "prywatne", więc trzeba by je jeszcze opublikować lub wrzucić do jakiejś przestrzeni nazw, czyli obiektu naszej aplikacji.

Dziękuje za podpowiedzi, postaram się to jutro przeanalizować, czekam też na inne ciekawe pomysły. Pozdrawiam