Display a div every 3 seconds with the help of jQuery

I am seeking a solution to display the second div (box2) every 3 seconds. Can anyone help me achieve this using jQuery?

<div id="box1" style="background-color:#0000FF">
     <h3>This is a heading in a div element</h3>

    <p>This is some text in a div element.</p>
</div>
<div id="box2" style="background-color:red">
     <h3>This is a heading in a div element</h3>

I have created a fiddle to demonstrate the issue: http://jsfiddle.net/jRmrp/5/

Update 1

The solution provided by Khanh TO works, but I am looking for a way to handle more than two div elements. The current solution only works for two.

javascriptjqueryhtmlcss

Answer №1

Require assistance with this?

setInterval(function(){
     $("#box2").toggle();
    $("#box1").toggle();
},3000);

Check out the DEMO here

New requirement has been added:

var currentIndex = 0;
$(".box:not(:eq("+ currentIndex +"))").hide();

var totalDiv = $(".box").length;

setInterval(function(){
     currentIndex = (currentIndex + 1) % totalDiv;

    $(".box").hide();
     $(".box").eq(currentIndex).show();

},3000);

Updated DEMO link is available here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieving Perfect Alignment of Images Using HTML and CSS

I am currently working on designing a HTML/CSS layout for a Kiosk-style website. However, I am encountering some challenges in getting the alignment of images and text to appear exactly as desired. The goal is to have the logo and header remain fixed in ...

htmlcss

Jquery Flexigrid at your service

Can someone help me understand how to implement Flexigrid jQuery on my website? Your assistance is greatly appreciated. ...

phpjqueryflexigrid

Tips for Extracting Real-Time Ice Status Information from an ArcGIS Online Mapping Tool

My goal is to extract ice condition data from a municipal website that employs an ArcGIS Online map for visualization. I want to automate this process for my personal use. While I have experience scraping static sites with Cheerio and Axios, tackling a sit ...

javascriptnode.jsweb-scrapingarcgis

Issue encountered when attempting to use an HTML document as a blueprint for generating additional HTML documents with the

I am currently working on an exercise that involves creating four different files: index.html, home.html, about.html, and contact.html. The objective is to utilize jQuery's .load function to load the other three HTML files within index.html while stil ...

htmljquery

Identify all paths with or without the .html suffix, excluding static resources

I am working on configuring a universal handler for requests that do not pertain to images or favicons. I want this handler to manage paths like /index, /index.html, /user/123, and similar, while excluding /favicon.ico, /sunflower.png, /images/starfish.png ...

javascriptnode.jsexpressroutes

Managing the position of the caret within a content-editable div

I need help with editing a contenteditable div in HTML <div contenteditable="true" id="TextOnlyPage"></div> Here is my jQuery code: var rxp = new RegExp("(([0-9]+\.?[0-9]+)|([0-9]+))", "gm"); $('#TextOnlyPage').keyup(function( ...

javascriptjqueryangularjscaret

Heroku is experiencing issues with loading Firebase credentials

Difficulty with Firebase Integration on Heroku Currently, I am facing an issue with my Node.js server deployed on Heroku that interacts with Firebase. When attempting to run the application on Heroku, I encounter an error stating that it is unable to load ...

javascriptnode.jsfirebasegoogle-cloud-firestorefirebase-admin

Challenges with Aligning Panels in Column 6

My initial encounter with bootstrap was interesting. I attempted to have two panels placed side by side using the col-lg-6 class. The left panel was meant to be a link to an article, along with an image, while the right panel would serve as a signup/login ...

htmlcssbootstrap-4

What is the best way to integrate a Ruby object into JavaScript?

I'm attempting to integrate Ruby into the JS.erb file, where I need access to the @user object and its relationships. Instead of converting to a JSON object, I prefer the ERB to precompile on the server-side. My goal is to iterate in the JS file rat ...

javascriptjqueryruby-on-railserb

The Angular Material Theme is not being properly displayed on the mtx-datetimepicker component

Issue: While using directives from ng-matero for DateTime with Angular Material for application design, the dateTimepicker element is not applying the angular material theme as desired. https://i.sstatic.net/zPBp3.png Code Example The app.module.ts file i ...

cssangularangular-material

How to use CakePHP to load a view containing PHP variables and then return it using Ajax

Alright, I've been seriously bothered by this issue for the past couple of days. Let's take a look at my form: echo $this->Form->create(FALSE, array('id' => 'AdminGeneralReport', 'class' => 'Report ...

phpjqueryajaxcakephp

Trouble with applying position absolute to pseudo element in Firefox version 12 and higher

I seem to be running into an issue with the positioning of a pseudo element in Firefox version 12 or higher (possibly even earlier versions). Despite having position:relative on the anchor tag, the element appears to be relative to the entire page. Any ide ...

htmlcssfirefox

Issue with Vue v-for not updating data model variable

I am attempting to render a page with dynamic properties using the following code: <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="root"> <div v-for="current in 2&quo ...

javascripthtmlvue.js

Trouble Viewing Fonts on Mobile Devices like iPhones

I am experiencing a frustrating issue on my website. While using Agency FB and Calibri fonts, they appear correctly on all desktop browsers. However, when accessed from my iPhone, a different standard font is displayed instead. Both the logo and text with ...

htmlcssiphonemobilebrowser

Top method for implementing select all checkboxes in a table

Hey there! I'm new to VueJS and I've been working on creating a data table component. So far, I have built two components called ui-datatable and ui-checkbox, which allow me to select all rows in the table. It's functioning perfectly fine, b ...

javascriptvue.jsvuejs2vue-component

What is the best way to calculate the days, exact hours, and exact minutes between two dates using JavaScript?

I need assistance with calculating the number of days, hours, and minutes between a start date time and an end time. For example: Start Date Time = "09-06-2017 10:30" End Date Time = "10-06-2017 11:45" I am looking for the result to be 1 day, 1 ...

javascriptjqueryangularjsmomentjs

Can someone guide me on how to locate and access the port number?

In my Reactjs project root directory, I've created a .env file. This is what's inside my .env file: PORT = 30001 ... In my App.tsx file, I'm trying to access the port like this: const PORT_NUMBER = process.env.PORT; When I run yarn start ...

javascriptreactjsreact-typescript

Issue with retrieving data using $_GET in jQuery select2

I am facing a unique situation. Here is the code snippet for select2: $("#tags").select2({ multiple: true, placeholder: "Please enter tags", tokenSeparators: [',', ' '], initSelection : function (element, callback) { ...

phpjqueryajaxjquery-select2

"Bringing in" ES6 for Node

I am interested in utilizing import from ES6 instead of require from common.js in Node. Surprisingly, I initially assumed that import would function automatically in Node. However, it appears that it does not. Is there a specific npm package that needs t ...

javascriptnode.jsecmascript-6

Sequelize.js keeps the previous value for linked tables

My objective is to update the product status within the Product table. Each product has a statusId, which is either "1" or "2". The default value for statusId is always set to "1" for all products and should switch to "2" when the route is accessed once (a ...

javascriptmysqlnode.jssequelize.jshttprequest