Javascript library for toggling element's CSS class by clicking another element

Class Toggler

Simple javascript library for toggling element’s CSS class by clicking another element(s). Toggling is controlled via data-attributes. Suitable for creating simply show/hide, more/less, tabs, accordion, dropdown or modal components without writing (repetitive) javascript code, all is done within your HTML template. Component visual behaviour is controlled by your stylesheets.

📋 Basic Usage

When toggling there are two types of HTML elements:

Toggle Button

  • Show/hides related content(s) when clicked.
  • Related content(s) is defined by data-toggle-target HTML attribut value.
  • Active state is identified by customizable CSS class (default -active-toggle).

Toggle Content

  • Element to be shown/hidden when related button(s) is clicked.
  • Related button(s) is defined by data-toggle-name HTML attribut value.
  • Hidden state is identified by customizable CSS class (default -hidden-toggle).

Basic Example

Reveals text and make the button green when you click on it:

<!-- Linking Class Toggler -->
<script src="class-toggler.min.js"></script>

<!-- Initialization of Class Toggler -->
<script>
  document.addEventListener('DOMContentLoaded', () => classToggler.init());
</script>

<!-- Styles for hidden content and active button -->
<style>
  .-active-toggle {
    color: green;
  }
  .-hidden-toggle {
    display: none;
  }
</style>

<!-- Toggle content -->
<div class="-hidden-toggle" data-toggle-name="toggle-name">
  <p>Text to be toggled.</p>
</div>

<!-- Toggle button -->
<button data-toggle-target="toggle-name">
  Toggle text!
</button>

(See live demos)

🚀 Initialization

  1. Link Class Toggler library in your HTML:
<script src="path-to-library/dist/class-toggler.min.js"></script>
  1. Initialize Class Toggler in your JS:
document.addEventListener('DOMContentLoaded', () => {
  classToggler.init();
});

or if using ES6 modules:

import classToggler from 'path-to-library/dist/class-toggler.esm.min.js';

document.addEventListener('DOMContentLoaded', () => {
  classToggler.init();
});

⚙ Options / Data Attributtes

Behaviour of each individual toggle can be set via these data attributes:

Toggle Button Options

data-toggle-target="name

Targets related content(s) that has data-toggle-name="name".

(See More/Less demo)

data-toggle-class=“class-name”

CSS class-name that will be assigned to active toggle button (default -active-toggle).

For example, when using BEM naming convention, your code should look like this:

<div class="Module">

  <button
    class="Module__button"
    data-toggle-target="module-text"
    data-toggle-class="Module__button--active"
  >Show text!</button>

  <p
    class="Module__text Module__text--hidden"
    data-toggle-name="module-text"
    data-toggle-class="Module__text--hidden"
  >Text lorem ipsum dolor.</p>

</div>

(See More/Less demo)

data-toggle-group="group-name"

Each group (togglers with the same group-name) can have maximum of one active toggler. Turning one toggler on will turn off the rest of togglers in group.

(See Accordion demo)

data-toggle-tabs="tabs-name"

Each tabs group (togglers with the same tabs-name) has always just one active toggler. Turning one toggler on will turn off the rest of togglers in tabs. Active toggler can’t be turned off by clicking it.

(See Tabs demo)

data-toggle-abort="event-1 event-2"

Automatically hides toggle for these possible events:

  • escape - Hide when escape key is pressed.
  • clickout - Hide when clicking outside the toggle content.

(See Modal demo)

data-toggle-match="media-query"

Binds toggle function on toggler only for matching media-query (e.g. (min-width: 30em)), otherwise default action will be fired (opening the <a>'s link, submitting <button>'s form…).

(See Media query demo)

Toggle Content Options

data-toggle-name="name"

Targets related button(s) that has data-toggle-target="name".

(See More/Less demo)

data-toggle-class="class-name"

CSS class-name that will be assigned to hidden toggle content (default -hidden-toggle). See toggle button option example.

(See More/Less demo)

data-toggle-focus="css-selector"

Element targeted by css-selector (e.g. #form-field) will be focused when content is shown.

(See Focused content demo)

👂 Events

ct.button.on

Fired at toggle button after it is turned on.

document.querySelector('#button').addEventListener('ct.button.on', () => {
  console.log('Button turned on!');
});

ct.button.off

Fired at toggle button after it is turned off.

document.querySelector('#button').addEventListener('ct.button.off', () => {
  console.log('Button turned off!');
});

ct.content.shown

Fired at toggle content after it is shown.

document.querySelector('#content').addEventListener('ct.content.shown', () => {
  console.log('Content shown!');
});

ct.content.hidden

Fired at toggle content after it is hidden.

document.querySelector('#content').addEventListener('ct.content.hidden', () => {
  console.log('Content hidden!');
});

ct.toggled

Fired at document when any toggle button is clicked.

document.addEventListener('ct.toggled', () => {
  console.log('Toggle button click!');
});

🛠 Configuration

Class Toggler can be initialized with these options:

  • classActive - CSS class for active toggle button (default -active-toggle)
  • classHidden - CSS class for hidden toggle content (default -hidden-toggle)
  • attrTarget - HTML data attribute used for toggle targeting (default data-toggle-target),
  • attrName - HTML attribute used for toggle naming (default data-toggle-name),
  • attrClass - HTML attribute defining toggled CSS class (default data-toggle-class),
  • attrFocus - HTML attribute used for focusing toggle content (default data-toggle-focus),
  • attrAbort - HTML attribute used for toggle aborting (default data-toggle-abort),
  • attrMatch - HTML attribute used for toggle media query (default data-toggle-match),
  • attrGroup - HTML attribute used for toggle grouping (default data-toggle-group),
  • attrTabs - HTML attribute used for toggle grouping in tabs (default data-toggle-tabs),
  • eventNamespace - Namespace for Class Toggler events (default ct),

Example of initialization with custom configuration:

document.addEventListener('DOMContentLoaded', () => {
  classToggler.init({
    classActive: 'your-active-class',
    classHidden: 'your-hidden-class',
  });
});

Download Details:

Author: vyvrhel

Demo: https://vyvrhel.github.io/class-toggler/

Source Code: https://github.com/vyvrhel/class-toggler

#javascript

What is GEEK

Buddha Community

Javascript library for toggling element's CSS class by clicking another element

Javascript library for toggling element's CSS class by clicking another element

Class Toggler

Simple javascript library for toggling element’s CSS class by clicking another element(s). Toggling is controlled via data-attributes. Suitable for creating simply show/hide, more/less, tabs, accordion, dropdown or modal components without writing (repetitive) javascript code, all is done within your HTML template. Component visual behaviour is controlled by your stylesheets.

📋 Basic Usage

When toggling there are two types of HTML elements:

Toggle Button

  • Show/hides related content(s) when clicked.
  • Related content(s) is defined by data-toggle-target HTML attribut value.
  • Active state is identified by customizable CSS class (default -active-toggle).

Toggle Content

  • Element to be shown/hidden when related button(s) is clicked.
  • Related button(s) is defined by data-toggle-name HTML attribut value.
  • Hidden state is identified by customizable CSS class (default -hidden-toggle).

Basic Example

Reveals text and make the button green when you click on it:

<!-- Linking Class Toggler -->
<script src="class-toggler.min.js"></script>

<!-- Initialization of Class Toggler -->
<script>
  document.addEventListener('DOMContentLoaded', () => classToggler.init());
</script>

<!-- Styles for hidden content and active button -->
<style>
  .-active-toggle {
    color: green;
  }
  .-hidden-toggle {
    display: none;
  }
</style>

<!-- Toggle content -->
<div class="-hidden-toggle" data-toggle-name="toggle-name">
  <p>Text to be toggled.</p>
</div>

<!-- Toggle button -->
<button data-toggle-target="toggle-name">
  Toggle text!
</button>

(See live demos)

🚀 Initialization

  1. Link Class Toggler library in your HTML:
<script src="path-to-library/dist/class-toggler.min.js"></script>
  1. Initialize Class Toggler in your JS:
document.addEventListener('DOMContentLoaded', () => {
  classToggler.init();
});

or if using ES6 modules:

import classToggler from 'path-to-library/dist/class-toggler.esm.min.js';

document.addEventListener('DOMContentLoaded', () => {
  classToggler.init();
});

⚙ Options / Data Attributtes

Behaviour of each individual toggle can be set via these data attributes:

Toggle Button Options

data-toggle-target="name

Targets related content(s) that has data-toggle-name="name".

(See More/Less demo)

data-toggle-class=“class-name”

CSS class-name that will be assigned to active toggle button (default -active-toggle).

For example, when using BEM naming convention, your code should look like this:

<div class="Module">

  <button
    class="Module__button"
    data-toggle-target="module-text"
    data-toggle-class="Module__button--active"
  >Show text!</button>

  <p
    class="Module__text Module__text--hidden"
    data-toggle-name="module-text"
    data-toggle-class="Module__text--hidden"
  >Text lorem ipsum dolor.</p>

</div>

(See More/Less demo)

data-toggle-group="group-name"

Each group (togglers with the same group-name) can have maximum of one active toggler. Turning one toggler on will turn off the rest of togglers in group.

(See Accordion demo)

data-toggle-tabs="tabs-name"

Each tabs group (togglers with the same tabs-name) has always just one active toggler. Turning one toggler on will turn off the rest of togglers in tabs. Active toggler can’t be turned off by clicking it.

(See Tabs demo)

data-toggle-abort="event-1 event-2"

Automatically hides toggle for these possible events:

  • escape - Hide when escape key is pressed.
  • clickout - Hide when clicking outside the toggle content.

(See Modal demo)

data-toggle-match="media-query"

Binds toggle function on toggler only for matching media-query (e.g. (min-width: 30em)), otherwise default action will be fired (opening the <a>'s link, submitting <button>'s form…).

(See Media query demo)

Toggle Content Options

data-toggle-name="name"

Targets related button(s) that has data-toggle-target="name".

(See More/Less demo)

data-toggle-class="class-name"

CSS class-name that will be assigned to hidden toggle content (default -hidden-toggle). See toggle button option example.

(See More/Less demo)

data-toggle-focus="css-selector"

Element targeted by css-selector (e.g. #form-field) will be focused when content is shown.

(See Focused content demo)

👂 Events

ct.button.on

Fired at toggle button after it is turned on.

document.querySelector('#button').addEventListener('ct.button.on', () => {
  console.log('Button turned on!');
});

ct.button.off

Fired at toggle button after it is turned off.

document.querySelector('#button').addEventListener('ct.button.off', () => {
  console.log('Button turned off!');
});

ct.content.shown

Fired at toggle content after it is shown.

document.querySelector('#content').addEventListener('ct.content.shown', () => {
  console.log('Content shown!');
});

ct.content.hidden

Fired at toggle content after it is hidden.

document.querySelector('#content').addEventListener('ct.content.hidden', () => {
  console.log('Content hidden!');
});

ct.toggled

Fired at document when any toggle button is clicked.

document.addEventListener('ct.toggled', () => {
  console.log('Toggle button click!');
});

🛠 Configuration

Class Toggler can be initialized with these options:

  • classActive - CSS class for active toggle button (default -active-toggle)
  • classHidden - CSS class for hidden toggle content (default -hidden-toggle)
  • attrTarget - HTML data attribute used for toggle targeting (default data-toggle-target),
  • attrName - HTML attribute used for toggle naming (default data-toggle-name),
  • attrClass - HTML attribute defining toggled CSS class (default data-toggle-class),
  • attrFocus - HTML attribute used for focusing toggle content (default data-toggle-focus),
  • attrAbort - HTML attribute used for toggle aborting (default data-toggle-abort),
  • attrMatch - HTML attribute used for toggle media query (default data-toggle-match),
  • attrGroup - HTML attribute used for toggle grouping (default data-toggle-group),
  • attrTabs - HTML attribute used for toggle grouping in tabs (default data-toggle-tabs),
  • eventNamespace - Namespace for Class Toggler events (default ct),

Example of initialization with custom configuration:

document.addEventListener('DOMContentLoaded', () => {
  classToggler.init({
    classActive: 'your-active-class',
    classHidden: 'your-hidden-class',
  });
});

Download Details:

Author: vyvrhel

Demo: https://vyvrhel.github.io/class-toggler/

Source Code: https://github.com/vyvrhel/class-toggler

#javascript

Lyda  White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

Private Class Fields and Methods in JavaScript Classes

JavaScript private class fields and methods are new features for JavaScript classes. In this tutorial, you will learn all you need to know about this feature. You will learn about what private methods and class fields are and how they work. You will also learn how to use them in your projects.

Introduction

When you want to add some data to JavaScript class you can do so through class properties. These properties are by default always public. This also means that they are publicly accessible and modifiable. The same also applies to class methods. They are also public by default.

This might often be okay. However, sometimes, you may want to keep some properties or methods private. You may want to make them inaccessible from the outside of the class they are defined in. This is where private methods and class fields can be handy.

Keeping it private

The idea of keeping some things private is simple and straightforward. When you want to keep something private, be it a property or method, it should be accessible only from one place. This place is the class in which you defined that property or method.

If you try to access private class field or method from elsewhere JavaScript should not allow it. This includes outside the class in which the class field or method is defined. Also any instance of that class. However, it is possible to access private class field from a method inside the same class.

#javascript #javascript classes #javascript private class

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css