logo
down
shadow

Detecting class toggle in jQuery


Detecting class toggle in jQuery

By : user2949521
Date : November 17 2020, 01:00 AM
Hope that helps .hasClass('someClass') will help you to retrieve a boolean true/false
code :
$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active');
    var act = $('.row-offcanvas').hasClass("active");

    if(act){
       $('.btn').html("HIDE");
    }else{
       $('.btn').html("SHOW");
    }
  });
});
$(function() {  // DOM ready

   $('[data-toggle="offcanvas"]').on("click", function () {
     var $row = $('.row-offcanvas').toggleClass('active');
     $('.btn').html($row.hasClass("active") ? "HIDE" : "SHOW");
   });

});


Share : facebook icon twitter icon
jQuery toggle div and toggle class

jQuery toggle div and toggle class


By : KendoKendo
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , You can exclude the clicked item from the removeClass function, and toggle it instead like this
Changed from the jsFiddle provided below.
code :
$('.sn').click(function(e) {
    $('ul.sidenav li').not(this).removeClass('active');
    $(this).stop(true, true).toggleClass("active");
});
jQuery Toggle only one div with the same class on click and toggle class

jQuery Toggle only one div with the same class on click and toggle class


By : ADITYA Kumar
Date : March 29 2020, 07:55 AM
will be helpful for those in need Before showing the content of the clicked button you have to hide the other content. I have done that. Check out the code below:
code :
$('.more-buttons').each(function () {
    $(this).on('click', function () {
        var clickbtn = $(this);
        $('.more-buttons').not(clickbtn).each(function(){
          $(this).removeClass('rotate');
        });
        var id = clickbtn.attr('id');
        $('#' + id).toggleClass('rotate');
        var content = $('#' + id).next('.additional-buttons-model');
        $('.additional-buttons-model').not(content).each(function(){
           $(this).css('display','none');
        });
        content.slideToggle('fast');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="more-buttons" id="551">
    <i class="material-icons">more_horiz</i>
</div>

<div class="additional-buttons-model" data-id="551">
    <div class="view-buttons">
        <input class="light-button" name="doedit" type="submit" value="edit">
        <input class="light-button" name="doclose" type="submit" value="close">
        <input class="light-button" name="dohide" type="submit" value="hide">
    </div>
</div>
<div class="more-buttons" id="552">
    <i class="material-icons">more_horiz</i>
</div>

<div class="additional-buttons-model" data-id="552">
    <div class="view-buttons">
        <input class="light-button" name="doedit" type="submit" value="edit">
        <input class="light-button" name="doclose" type="submit" value="close">
        <input class="light-button" name="dohide" type="submit" value="hide">
    </div>
</div>
<div class="more-buttons" id="553">
    <i class="material-icons">more_horiz</i>
</div>

<div class="additional-buttons-model" data-id="553">
    <div class="view-buttons">
        <input class="light-button" name="doedit" type="submit" value="edit">
        <input class="light-button" name="doclose" type="submit" value="close">
        <input class="light-button" name="dohide" type="submit" value="hide">
    </div>
</div>
<div class="more-buttons" id="554">
    <i class="material-icons">more_horiz</i>
</div>

<div class="additional-buttons-model" data-id="554">
    <div class="view-buttons">
        <input class="light-button" name="doedit" type="submit" value="edit">
        <input class="light-button" name="doclose" type="submit" value="close">
        <input class="light-button" name="dohide" type="submit" value="hide">
    </div>
</div>
$('body').not('.more-buttons').click(function () {
    var clickbtn = $('.more-buttons');
    $(clickbtn).each(function(){
        $(this).removeClass('rotate');
    });
});

$('body').not('.additional-buttons-model').click(function () {
    var content = $('.additional-buttons-model');
    $(content).each(function(){
       $(this).css('display','none');
    });
});
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>
Jquery toggle class on click, and remove class if another menu item clicked

Jquery toggle class on click, and remove class if another menu item clicked


By : Binay Singh
Date : March 29 2020, 07:55 AM
I hope this helps . Shouldn't you just be checking if the current element has the .icon-arrow-down class. So rather than
How do I toggle a class on click of an element but remove the same class from all other elements using JQuery?

How do I toggle a class on click of an element but remove the same class from all other elements using JQuery?


By : Alex N.
Date : March 29 2020, 07:55 AM
wish help you to fix your issue I'm trying my best to word this properly so please bear with me. So I'm trying to only toggle a class (active) on an element that is clicked. If another element is clicked I would like to add the class "active" to the element clicked and remove the active class from any other element. , Here's the working code:
Related Posts Related Posts :
  • javascript - explanation request of a behaviour
  • Converting String into date format in JS
  • Choose element Angular
  • Display background grid by using image with CSS
  • Call function from another Controller in another file AngularJS
  • How to change texture in Gera library?
  • When trying to use windows.location.href , the values of $_POST[''] is lost
  • jQuery click action on appended item
  • NodeJS & Socket.IO: Emit a request event and get the response, when/where should I bind the listener?
  • 4-digit form on bootstrap modal
  • Prevent characters like quotation marks from input
  • Sign in option creation using jsp and oracle database
  • use socket.io in my controller with yeoman
  • What happens under the hood to prevent calling a bound method changing the this object?
  • issue with jquery .append function
  • Is it possible to EventHandle every GET request a page makes via Javascript?
  • How to select class with ng-if
  • Cannot communicate with websocket. Autobahn: received HELLO message, and session is not yet established
  • Socket.io - Cannot connect to client
  • Load Accordian Panel on click rather than page load
  • How to register async middleware module within express.js app?
  • JS / Cannot read property 'push' of undefined
  • how to make jquery plugin?
  • MATH reverting rotated coordinates
  • Add an expandable text box to every post
  • What was the rationale behind having the receiver in functions default to the global object?
  • JavaScript chaining many function
  • while loop over takes the each method
  • What are the difference between $(document).bind('ready', function) and $(document).ready(function() {})
  • cut the string in javascript
  • Tool tip not working on text area bootstrap
  • AngularJS: how to activate first non zero item in ngRepeat?
  • Pattern for "column total" of an array of arrays
  • Any selector using * failed in my case
  • Uncaught ReferenceError: app is not defined in Angularjs
  • Unit testing controller which has a $state.go method in controller
  • Use of Meteor-ui-progress-circle (accessing to Template variables created in the HTML)
  • JavaScript: Google maps mapOptions?
  • How do I track Universal Analytics events through Google Tag Manager?
  • Firefox Scrolling Bug When Changing :after Contents
  • Drop down list does not work
  • Display month and year specific datepicker in jquery
  • How to show BAr graph rather than line graph in High Stoch Chart
  • Accessing Angular $Scope in web workers
  • How to convert JavaScript(UnityScript) to C# and implement a low pass filter?
  • Need a logic to implement select button value via onchange event
  • redirect in codeigniter using ajax function
  • How to populate this form data and post it with jquery
  • Retrive value from array id in js function
  • angularjs $index when ng-hide with ng-repeat
  • ExtJS TaskRunner
  • Progress bar not hiding after fetching values via AJAX in JavaScript
  • Pop up window code fails
  • how to make dynamic javascript array with key and value group
  • Implement Facebook API login with reactjs
  • What is the meaning of sign ':' in javascript
  • Change all id's in HTMLDivElement using jQuery
  • load multiple pages from different domain in different divs using javascript
  • Could Not Resolve Host github.com
  • jQuery "Chosen" on-filter event?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org