logo
down
shadow

Loop Toggle for different ID Element


Loop Toggle for different ID Element

By : user2951154
Date : November 18 2020, 01:01 AM
With these it helps You just need to add two new params to your function for the buttonSelector and the containerSelector. In your example, you would pass in "#btn1-Bln" and "containerXd" for these new params, respectively. Then, use these new variables rather than the hard-coded strings in your function body. This will allow you to use your single existing function with any buttons and containers.
code :


Share : facebook icon twitter icon
jQuery toggle allow default href of parent element AND parent element should show child elements (toggle)

jQuery toggle allow default href of parent element AND parent element should show child elements (toggle)


By : user2022718
Date : March 29 2020, 07:55 AM
seems to work fine http://jsfiddle.net/tFh9w/8/
Because you are using static HTML files, unless you want to make the menu different in each file (I hope you're at least including the menu using SSI), you need JS to detect what page the browser has opened, and to then trigger the opening of the relevant menu item.
code :
<li class="level1"><a href="1.html">1</a>
    <ul>
        <li><a href="1-1.html">1-1</a></li>
        <li><a href="1-2.html">1-2</a></li>
        <li><a href="1-3.html">1-3</a></li>         
    </ul>
</li>   
<li class="level1"><a href="2.html">2</a>
      etc etc
$(function(){
    var hrefs = $.trim(window.location.href).replace(/\/$/, "").split('/');
    var href = hrefs[hrefs.length -1];
    href = '1.html'; // we have to cheat in jsfiddle. remove this line in production
    // href = '1-1.html';
    $('#menu-flag-menu a[href="' + href + '"]').each(function(){
        // what are we opening - the child of this link or the parent?

        if ($(this).parent().hasClass('level1')) $ul = $(this).parent().children('ul');
        else $ul = $(this).closest('ul');

        $ul.slideDown();
    });

});
jQuery how to use toggle function to element in for loop

jQuery how to use toggle function to element in for loop


By : Freil
Date : March 29 2020, 07:55 AM
I wish this helpful for you You don't need a loop for this. You simply need to call slideUp() on all other .slider-div elements before you toggle the one related to the clicked .money-transf, like this:
code :
$(document).ready(function() {
  var $slider = $('.slider-div');
  var $transf = $('.money-transf');

  $transf.click(function(e) {
    var $target = $(this).next('.slider-div');
    $slider.not($target).slideUp();
    $target.slideToggle();
  });
})
.slider-div {
  display: none;
}

p {
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="money-transf">
  <p>Element</p>
</div>
<div class="slider-div">
  <p>Inform about element</p>
</div>
<div class="money-transf">
  <p>Element2</p>
</div>
<div class="slider-div">
  <p>Inform about element2</p>
</div>
Vanilla Javascript: Remove toggle class from X element if I click on Y element with the same toggle class

Vanilla Javascript: Remove toggle class from X element if I click on Y element with the same toggle class


By : johnlst
Date : March 29 2020, 07:55 AM
This might help you The jQuery code that removes the selected class is equivalent to a loop. So just write that loop in your event listener.
code :
var selectCategory = document.getElementsByClassName('sidebar-category');

for (var i = 0, l = selectCategory.length; i < l; i++) {
  selectCategory[i].onclick = function() {
    for (var j = 0; j < l; j++) {
      if (selectCategory[j] != this) {
        selectCategory[j].classList.remove("selected");
      }
    }
    this.classList.toggle('selected');
  }
}
How can I loop through a list of elements and toggle a class on them in jQuery, with a delay in between each toggle?

How can I loop through a list of elements and toggle a class on them in jQuery, with a delay in between each toggle?


By : user3298544
Date : March 29 2020, 07:55 AM
it fixes the issue I am looking to loop through a list of elements and toggle a class on each one (.active), changing this every 4 seconds. The active class will change the background color of the icon and display it's relevant text underneath. , Please find below a working example in vanilla JS
code :
const icons = document.getElementsByClassName("fa");
const texts = document.getElementsByClassName("perk-text");
Array.from(texts).forEach(textElement => {
  textElement.style.display = "none";
});

setInterval(() => {
  const iconsArray = Array.from(icons);
  const activeIconIndex = iconsArray.findIndex(icon => icon.classList.contains("active"));
  const nextActiveIndex = (activeIconIndex + 1) % iconsArray.length
  iconsArray[nextActiveIndex].classList.add("active");
  iconsArray[activeIconIndex].classList.remove("active");
  toggleText(iconsArray[nextActiveIndex].classList);
}, 4000);


function toggleText(activeIconClasses) {
  let textIdToActivate = "";
  switch (activeIconClasses[1]) {
    case "fa-wifi":
      textIdToActivate = "wifi-text";
      break;
    case "fa-plug":
      textIdToActivate = "plug-text";
      break;
    case "fa-suitcase":
      textIdToActivate = "suitcase-text";
      break;
    case "fa-wheelchair":
      textIdToActivate = "wheelchair-text";
      break;
  }
  Array.from(texts).forEach(textElement => {
    textElement.style.display = "none";
  });
  const textElement = document.getElementById(textIdToActivate);
  textElement.style.display = "block";


}
.active {
  background-color: #74BDE9;
  color: #ffffff;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/fontawesome.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner">
    <div class="item wifi-icon"><i class="active fa fa-wifi" aria-hidden="true"></i></div>
    <div class="item plug-icon"><i class="fa fa-plug " aria-hidden="true"></i></div>
    <div class="item suitcase-icon"><i class="fa fa-suitcase" aria-hidden="true"></i></div>
    <div class="item wheelchair-icon"><i class="fa fa-wheelchair" aria-hidden="true"></i></div>
  </div>
  <div id="info">
    <div id="wifi-text" class="perk-text ">
      <h3>Free WiFi</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
    </div>
    <div id="plug-text" class="perk-text ">
      <h3>Power Sockets</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
    </div>
    <div id="suitcase-text" class="perk-text ">
      <h3>Luggage</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
    </div>
    <div id="wheelchair-text" class="perk-text ">
      <h3>Wheelchair Accessible</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
    </div>
  </div>

</div>
How can I toggle between the classes of an element inside a loop?

How can I toggle between the classes of an element inside a loop?


By : Annie3305
Date : March 29 2020, 07:55 AM
seems to work fine No need any loop to toggle class.Also you have typo mistake at the class name.class name is fistClass not firstClass.
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org