When I make display that scrollie so that the element can be seen (without jquery)

2

Basically I would need your help so that when I press the question button and the answer opens scrollie so I can see the answer on the screen. Since what happens when I open the third question I can not see the answer and I have to go down scrolling. Thanks

<ul class="preguntas-help">
  <li><h2 onclick='showHide(0)'>¿Quienes somos?</h2></li>
  <li><p style= "display: none"> Lorem ipsum dolor sit amet
   </p></li>
  <li><h2 onclick='showHide(1)'>¿Cómo funciona?</h2></li>
  <li><p style= "display: none">Lorem ipsum dolor sit amet
   </p></li>
  <li><h2 onclick='showHide(2)'>¿Qué son los grados?</h2></li>
  <li><p  style= "display: none"> Lorem ipsum dolor sit amet, 
  </p></li>
</ul>
</div>
</div>
</div>
<script>
function showHide(num) {
var parrafo = document.getElementsByTagName('p');
parrafo[num].style.display == "none" ? parrafo[num].style.display = 'block' : parrafo[num].style.display ='none';
}
</script>
    
asked by Infraganti 24.09.2016 в 19:56
source

1 answer

2

There are several ways to do it, without modifying much your current code you can use location.hash with the ID of the element that you want to be at the top of the scroll. This forces the browser to scroll (if possible).

This example, scrolls the paragraphs directly.

function showHide(num) {
  var parrafo = document.getElementsByTagName('p');
  parrafo[num].style.display == "none" ? parrafo[num].style.display = 'block' : parrafo[num].style.display ='none';

  // cambias el HASH y el navegador hace todo el trabajo
  location.hash = parrafo[num].id
}
<ul class="preguntas-help">
  <li><h2 onclick='showHide(0)'>¿Quienes somos?</h2></li>
  <li><p id="p1" style= "display: none"> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
   </p></li>
  <li><h2 onclick='showHide(1)'>¿Cómo funciona?</h2></li>
  <li><p id="p2" style= "display: none">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
   </p></li>
  <li><h2 onclick='showHide(2)'>¿Qué son los grados?</h2></li>
  <li><p id="p3" style= "display: none"> Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
  </p></li>
</ul>
    
answered by 24.09.2016 / 20:42
source