What is the best way to make one div show that another div is being toggled in a slideshow display?

I am searching for a solution to indicate when a div is being toggled, using a separate div with the class of ".bars".

Experimented with if statements and modifying classes on the indicator div ".bars" to adjust its characteristics...

The ".bars" indicator consists of three child divs, each corresponding to a toggled div in a slideshow...

if($(".one")).show(){
$(".bars div").css(update properties here);
}
//The issue I'm facing is that I can modify other HTML elements this way such as the parent div ".bar" but struggling to change its children...
<div class="bars">
<div></div>
<div></div>
<div></div>
</div>

Check out my CodePen link to see where I am encountering challenges http://codepen.io/gebrutommy/pen/ZpGZRv?editors=0010

javascriptjqueryhtmlcssdom

Answer №1

If I correctly grasp your objective... I have made modifications to your focusNextDiv function in order to incorporate a highlighting class:

JS: 

function focusNextDiv() {
  $(".gallery").hide();
  divs[index].toggle();

  // New JS implementation
  var bars = $('.bars div').removeClass('current');
  $(bars.get(index)).addClass('current');
  // End of New JS implementation

  index++; 
  if (index === divs.length) {
    index = 0;
  }
}

CSS: 

.bars div.current {
  background-color: red;
}

HTML:

  <div class="bars flex row">
    <div class="current"></div>
    <div></div>
    <div></div>
  </div>

This can be optimized further, but my goal was to ensure I comprehended the issue accurately. Does this align more closely with your requirements?

This script makes use of your index variable and scans the .bars div for a child matching the same index, then applies a .current class to it. I have also manually assigned the .current class in your HTML markup so that upon page load, the initial .bar div is displayed as selected.

View Working Codepen Example

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

Is there a way to trim JSONP data to only obtain the year value

My current setup involves using an API to fetch data, which includes the release date of a game. '<h4 style="display:inline-block; padding-left:5px;" class="post-title">' + game.name + ' <span class="small">' + game.origin ...

javascriptjqueryapijsonp

How to open a print preview in a new tab using Angular 4

Currently, I am attempting to implement print functionality in Angular 4. My goal is to have the print preview automatically open in a new tab along with the print popup window. I'm struggling to find a way to pass data from the parent window to the c ...

javascriptangulartypescriptprintingtabs

display/hide a div within a separate container

Greetings, I am seeking assistance in understanding why the second tab button is not functioning properly. I am attempting to create a layout with a wrapper div, a left side div containing label buttons, and a right side div for displaying content. When I ...

htmlcssnested

Is there a way to eliminate an item from a Redux/React array state?

I am having trouble removing an object from an array onClick when I click on the delete button. I have written some code in my redux and react but it is not functioning as expected! Reducers import { ActionsTypes } from "../Constant/ActionsTypes" ...

javascriptreactjsredux

Update an object within an array in MongoDB, ensuring that only the first object is modified

Currently, I am following a tutorial on the node.js framework. You can check it out here: https://www.w3schools.com/nodejs/nodejs_mongodb.asp I've encountered a peculiar issue that I can't seem to figure out. To give you a better idea, I've ...

javascriptnode.jsarraysmongodbobject

What is the best way to stop a jQuery event listener on a button within a form from triggering upon the user hitting the Enter key?

Here is an example of a form containing a button: <form> <input type="text"> <button>Click Me</button> <input type="submit" value="Submit"/> </form> Using the following JavaScript: $('form').subm ...

jqueryhtmlformsbuttonform-submit

Leveraging React useEffect for retrieving data and managing component behavior

Having trouble querying data, setting it to state with useEffect, and rendering the results? I've tried a few things but only see changes when state is updated. Any advice would be greatly appreciated. Thank you in advance. useEffect // fetchCamp ...

javascriptreactjsnext.jsaxios

Deciphering the nuances of middleware and route handling in Express.js

I'm currently exploring the inner workings of middleware and route handlers in Express. In Web Development with Node and Express, the author presents an intriguing scenario involving a route and middleware, but leaves out the specific details. Could ...

javascriptnode.jsexpresswebmiddleware

Toggle accordion based on different situations dynamically

My goal is to dynamically select which accordion tab has the .active class based on the results of a switch/case statement. I have set up a switch/case statement to hide certain tabs based on the condition. <script> $(function () { $("#accordion-te ...

javascriptphpjqueryhtmljquery-ui

Use JavaScript to swap out images

How can I change the image arrow when it is clicked? Currently, I have this code snippet: http://codepen.io/anon/pen/qEMLxq. However, when the image is clicked, it changes but does not hide. <a id="Boton1" class="button" onClick="showHide()" href="j ...

javascripthtmlimage

Creating an interactive dropdown feature using AngularJS or Ionic framework

$scope.AllCities = window.localStorage.getItem['all_cities']; <div class="row"> <div class="col"> <div class="select-child" ng-options="citie.name for citie in AllCities" ng-model="data.city"> <label&g ...

javascriptangularjshtmlionic-framework

Instructions on inserting an IFRAME using JavaScript into dynamically loaded content via AJAX

How can I dynamically add an IFRAME using JavaScript to content that is refreshed via AJAX? Consider the following example: $('#bar').delegate('.scroll-content-item span a', 'click', function() { var object_id = $(this).p ...

javascriptajaxiframedynamic

Properties that cannot be modified, known as read-only properties,

While browsing through this post on read-only properties, I stumbled upon the following code snippet: var myObject = { get readOnlyProperty() { return 42; } }; alert(myObject.readOnlyProperty); // 42 myObject.readOnlyProperty = 5; // Assignment al ...

javascriptobject

Encountering the "excessive re-renders" issue when transferring data through React Context

React Context i18n Implementation i18n .use(initReactI18next) // passes i18n down to react-i18next .init({ resources: { en: { translation: translationsEn }, bn: { translation: translationsBn }, }, lng: "bn ...

javascriptreactjsreact-contexti18next

Enhance the progression bar using JavaScript

Is there a way to dynamically update a progress bar in HTML while a function is running? function fillProgressBar() { var totalIterations = 100; for (var i = 1; i <= totalIterations; i++) { //perform calculations progressBarWidth = (i/to ...

javascripthtmlcss

Discover the steps to integrating jsfiddle into my local development environment

If you want to check out the code for this example, head over to jsfiddle at this link. And below is a snippet of the HTML file: <!DOCTYPE html> <html> <head> <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type= ...

javascriptjqueryhtmlcss

Is there a way to transfer a value from my JavaScript game directly into a Flask database?

Currently, I am working on developing a JavaScript game embedded in a website that utilizes a Flask database. For some added context, my goal is to allow users to earn virtual currency, known as Lamocoins, by playing the mini-game. However, I seem to be f ...

javascriptdatabaseflasksqlalchemy

How can we safely minimize time delay in a date using setTimeout?

I am encountering a significant issue with time delays in the setTimeout function. I have written code for a button to show action at a specific hour, but the problem arises when someone opens the page 30-120 minutes before the action without refreshing, c ...

javascriptphpjquery

Updating a conditional statement in jQuery

Understanding jQuery has always been a challenge for me. I find myself spending hours reading documentation every time I try to implement it, only to achieve very little progress. Here's the code I'm currently working on with live-editing availab ...

jqueryhtmlcssif-statement

Unusual discovery within JQuery and IFrames

Let's set the stage. function scrollLog(line) { // Let's assume it's for Firefox // alert("weird"); frames['log'].find(line); }; There's a function that I trigger when the document is ready. The current code doesn&a ...

jqueryhtmliframe