Question 30698 in Wordpress Question posted in
The official Wordpress documentation can be found here.

how to show and hide heading every 10 seconds with javascript in wordpress

I have one section where i have 3 headings for that section and I want to show them one by one
with interverl of 10 seconds

it would be like at the strat you will have one heading and its content and then after 10 second the text inside the heading will change and after 10 seconds it will change aagin

<h2>helllo world</h2>

<h2>helllo world 2</h2>

<h2>helllo world 3</h2>

i have 3 headings and have to show them one by one,

in my code i have did like this disabled all and then showed one but i am having problem to loop it

<body>
    <h1>hellow orld</h1>
    <h1>hellow orld2</h1>
    <h1>hellow orld3</h1>

    <script>
        let myarr = document.querySelectorAll('h1');
        let myindex = 0;

        console.log(myarr)

        for (let index2 = 0; index2 < 10000; index2++) {
            one();
        setTimeout(impFunct, 1000);
            
        }

        function one() {
            myarr.forEach(element => {
            element.style.display = 'none';
            });

        myarr[myindex].style.display = 'block';
        }
    
        function impFunct() {
            if(myindex==2) {myindex=0; return;}
            myindex++
            console.log(myindex);
        }
    </script>
</body>

all I am doing this to work in wordpress if you know any plugin or any method to do the same.

Pls help

Tags:

2

Answers


  1. 0 
    <!DOCTYPE html>
<body>
    <h1>hellow orld</h1>
    <h1>hellow orld2</h1>
    <h1>hellow orld3</h1>

    <script>
        let myarr = document.querySelectorAll('h1');
        let myindex = 0;
        timeout();
        function timeout() {
            setTimeout(function () {
                myarr.forEach(element => {
                    element.style.display = 'none';
                });
                myarr[myindex].style.display = 'block';
                if(myindex == 2){
                    myindex = 0;
                } else {
                    myindex++;
                }

                timeout();
            }, 1000);
        }
    </script>
</body>
</html>
    Login or Signup to reply.
  2. 0 
    <body>
    <h1>hellow orld1</h1>
    <h1>hellow orld2</h1>
    <h1>hellow orld3</h1>

    <script>
        let headings = document.querySelectorAll('h1');
        let currentHeading = 0;
        headings.forEach(heading => heading.style.display='none')
        
        const showNextHeading = (intervalId) => {
          headings.forEach((heading, i) => {
            i === currentHeading 
              ? heading.style.display = 'block'
              : heading.style.display = 'none'
          })
          currentHeading +=1

         // if you don't want headings to keep changing forever uncomment line bellow
         // if(currentHeading === 3) clearInterval(intervalId)

          if (currentHeading === 3) currentHeading = 0

        }
        
        showNextHeading()
        const intervalId = setInterval(() => showNextHeading(intervalId), 1000);
        
    </script>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search