Mi página consta de varios elementos , botones y scrollers . Cada botón es para ocultar/mostrar un grupo de elementos, y cada scroller es para desplazarse hasta el primer elemento del grupo. Utilizo eventos onclick para ocultar, mostrar y desplazarme, y todos funcionan bien. Lo que estoy intentando y no puedo hacer es ocultar el desplazador automáticamente cuando todos los elementos relacionados están ocultos.

EJEMPLO: Cuando hago clic en la rueda de scroller , la página va al Element 1a . Cuando hago clic en el primer button , oculta/muestra los Elementos 1a, 1b y 1c, y hago clic en el segundo button para hacer lo mismo con los Elementos 1d, 1e, 1f. Necesito que mi scroller se oculte automáticamente cuando no quede ningún element visible en la página que esté conectado con este scroller. ¿Cómo puedo arreglar mi código js para lograr esto?

HTML:

 <div class="element">Element 1a</div> <div class="element">Element 1b</div> <div class="element">Element 1c</div> <div class="element">Element 1d</div> <div class="element">Element 1e</div> <div class="element">Element 1f</div> ... <div class="button" onclick="hide1()">Hide/Unhide 1a,1b,1c</div> <div class="button" onclick="hide2()">Hide/Unhide 1d,1e,1f</div> <div class="scroller" onclick="scroll1()">Scroll to Element 1</div> <script>window.onload = hidescroller()</script>

JS:

 function hidescroller() { var scroller = document.getElementsByClassName("scroller")[0]; var element = document.getElementsByClassName("element"); var i; for (i=0; i<element.length; i++) { if (element[i].style.display = "none") { scroller.style.display = "none"; } else { scroller.style.display = "block"; } } }

Estoy contento con mis hide1() , hide2() y scroll1() , así que para evitar confusiones no las escribí. Si también necesitas verlos, solo házmelo saber.