FAQ(Accordion)

PHOTO

Tue Apr 02 2024 06:51:19 GMT+0000 (Coordinated Universal Time)

Saved by @divyasoni23 #jquery #js

constructor(element) {
		this.$element = $(element);
		this.$tabs = this.$element.find('.accordion__tab');
		this.$innerConts = this.$element.find('.accordion__inner-cont');
		this.$contents = this.$element.find('.accordion__content');
		this.init();
	}

	init() {
		this.$tabs.first().addClass('active');
		this.$innerConts.first().addClass('active');
		this.$tabs.click((e) => {
			e.preventDefault();
			const $this = $(e.currentTarget);
			this.$tabs.not($this).add(this.$innerConts).removeClass('active');
			this.$contents.not($this.next()).slideUp();
			$this.toggleClass('active').parent().toggleClass('active');
			$this.find('.icon').toggleClass('icon-up icon-down');
			$this.next().slideToggle();
		});
	}

// constructor(element) {
	// 	this.$element = $(element);
	// 	this.$tabs = this.$element.find('.faq__tab');
	// 	this.init();
	// }

	// init() {
	// 	$('.faq__tab:first, .faq__inner-cont:first').addClass('active');
	// 	this.$tabs.click(function (e) {
	// 		e.preventDefault();
	// 		$('.faq__tab, .faq__inner-cont').not(this).removeClass('active');
	// 		$('.faq__content').not($(this).next()).slideUp();
	// 		$(this).toggleClass('active');
	// 		$(this).parent().toggleClass('active');
	// 		$(this).find('.icon').toggleClass('icon-up icon-down');
	// 		$(this).next().slideToggle();
	// 	});
	// }

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

#html #jquery #css #navbar

Underline active navbar link

// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link

#javascript #jquery

jQuery.post() - AJAX for post requests

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

#javascript #jquery

How to Select All Elements with jQuery

var allElements = $("*");

#javascript #js #bookmarklet #css

Simple Dark Mode Toggle

javascript:(d=>{var css=`:root{background-color:#f1f1f1;filter:invert(1) hue-rotate(180deg)}img:not([src*=".svg"]),picture,video{filter: invert(1) hue-rotate(180deg)}`,style,id="dark-mode",ee=d.getElementById(id);if(null!=ee)ee.parentNode.removeChild(ee);else {style = d.createElement('style');style.type="text/css";style.id=id;if(style.styleSheet)style.styleSheet.cssText=css;else style.appendChild(d.createTextNode(css));(d.head||d.querySelector('head')).appendChild(style)}})(document)

#javascript #jquery

How to use switchClass and toggleClass in jQuery

https://makitweb.com/how-to-use-switchclass-and-toggleclass-in-jquery/

Force an Iframe to Reloa

$('iframe').attr('src', $('iframe').attr('src'));

Better Broken Image Handling | CSS-Tricks

// Replace source
$('img').on("error", function() {
  $(this).attr('src', '/images/missing.png');
});

// Or, hide them
$("img").on("error", function() {
  $(this).hide();
});

Get Query Params as Object | CSS-Tricks

jQuery.extend({

  getQueryParameters : function(str) {
	  return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
  }

});

Simple jQuery Accordion | CSS-Tricks

(function($) {
    
  var allPanels = $('.accordion > dd').hide();
    
  $('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);

Calculate Distance Between Mouse and Element | CSS-Tricks

(function() {
    
    var mX, mY, distance,
        $distance = $('#distance span'),
        $element  = $('#element');

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {  
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, mX, mY);
        $distance.text(distance);         
    });

})();

Move Clicked List Items To Top Of List | CSS-Tricks

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Scroll Page Horizontally With Mouse Wheel | CSS-Tricks

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

Fade Image Into Another Image | CSS-Tricks

<div id="kitten" style="background-image: url(dog.jpg);">
  <img src="/images/kitten.jpg" alt="Kitten" />
</div>

Simple Auto-Playing Slideshow | CSS-Tricks

<div id="slideshow">
   <div>
     <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>

#javascript #jquery

Simple Auto-Playing Slideshow

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

Browse more snippets >>