https://github.com/hichemtab-tech/choozedisplay-js
ChoozeDisplay is a lightweight jQuery plugin designed to enhance user interaction by dynamically showing or hiding content based on checkbox, radio button, or select dropdown selections. It provides an intuitive way to manage visibility and create dynamic user interfaces.
https://github.com/hichemtab-tech/choozedisplay-js
checkbox content-management dynamic-content dynamic-display javascript jquery jquery-plugin jquery-ui library radio-buttons select-dropdown show-hide toggle user-interface visibility-change
Last synced: 3 months ago
JSON representation
ChoozeDisplay is a lightweight jQuery plugin designed to enhance user interaction by dynamically showing or hiding content based on checkbox, radio button, or select dropdown selections. It provides an intuitive way to manage visibility and create dynamic user interfaces.
- Host: GitHub
- URL: https://github.com/hichemtab-tech/choozedisplay-js
- Owner: HichemTab-tech
- License: mit
- Created: 2024-06-12T05:02:09.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-06-19T00:32:57.000Z (about 1 year ago)
- Last Synced: 2025-03-12T08:51:30.066Z (4 months ago)
- Topics: checkbox, content-management, dynamic-content, dynamic-display, javascript, jquery, jquery-plugin, jquery-ui, library, radio-buttons, select-dropdown, show-hide, toggle, user-interface, visibility-change
- Language: HTML
- Homepage: https://hichemtab-tech.github.io/ChoozeDisplay-js
- Size: 52.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# ChoozeDisplay jQuery Plugin
## Overview
**ChoozeDisplay** is a flexible jQuery plugin that dynamically displays content based on user selections from checkboxes, radio buttons, or select dropdowns. This plugin allows developers to create interactive and responsive web applications with minimal effort.
## Table of Contents
- [Requirements](#requirements)
- [Features](#features)
- [Installation](#installation)
- [npm](#npm)
- [CDN](#cdn)
- [Local Download](#local-download)
- [Usage](#usage)
- [Example](#example)
- [Options](#options)
- [Demo](#demo)
- [Contributing](#contributing)
- [Author](#author)
- [License](#license)
## Requirements
To use the ChoozeDisplay jQuery Plugin, you need the following dependencies:
- jQuery (minimum version 3.7.0)
You can include these dependencies in your HTML file via CDN or by downloading the files locally.
## Features
- Dynamically show or hide content based on checkbox, radio button, or select dropdown selections.
- Easy to configure using both JavaScript and HTML data attributes.
- Supports multiple conditions and actions.
- Lightweight and easy to integrate with existing jQuery projects.
## Installation
To use the ChoozeDisplay jQuery Plugin in your project, you can include the necessary files via npm, CDN,
or by downloading the files locally.
### npm
You can install ChoozeDisplay via npm:
```bash
npm install choozedisplay-js
```
### CDN
You can also include ChoozeDisplay directly from a CDN by adding the following script tag to your HTML file:
```html
```
### Local Download
If you prefer to host the library locally,
you can download the latest release from the source code and include it in your project:
```html
```
## Usage
To use the ChoozeDisplay jQuery Plugin, follow these steps:
- Include the necessary scripts as described in the installation section.
- Create input elements and the target divs in your HTML.
- Initialize ChoozeDisplay with the option object or data attributes:
**HTML:**
```html
Choose your favorite Sports:
Football
Basketball
Tennis
Choose your preferred OS:
Windows
MacOS
Linux
Select your Favorite Fruit:
Select fruit...
Apple
Banana
Orange
Selecting Apple, and Football is good with Windows.
Selecting Apple, and Football is good with macOS.
Selecting Apple, and Basketball is good with Windows.
Selecting Apple, and Basketball is good with macOS.
Selecting Banana, and Football is good with Windows.
Selecting Banana, and Football is good with macOS.
Selecting Banana, and Basketball is good with Windows.
Selecting Banana, and Basketball is good with macOS.
Selecting Orange, and Football is good with Windows.
Selecting Orange, and Football is good with macOS.
Selecting Orange, and Basketball is good with Windows.
Selecting Orange, and Basketball is good with macOS.
```
**JavaScript:**
```javascript
$(document).ready(function() {
const options = {
triggerControls: [
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'apple' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#apple-football-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'apple' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#apple-football-macos-info'
},
{
conditions: [
{ type: 'checkbox', id: 'basketball', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'apple' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#apple-basketball-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'basketball', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'apple' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#apple-basketball-macos-info'
},
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'banana' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#banana-football-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'banana' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#banana-football-macos-info'
},
{
conditions: [
{ type: 'checkbox', id: 'basketball', state
: 'checked' },
{ type: 'select', id: 'fruits', value: 'banana' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#banana-basketball-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'basketball', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'banana' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#banana-basketball-macos-info'
},
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'orange' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#orange-football-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'orange' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#orange-football-macos-info'
},
{
conditions: [
{ type: 'checkbox', id: 'basketball', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'orange' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#orange-basketball-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'basketball', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'orange' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#orange-basketball-macos-info'
}
]
};
// Initialize the plugin with options object
$(document).ChoozeDisplay(options);
// Initialize the plugin to read from attributes
$('[data-target]').ChoozeDisplay();
});
```
## Example
```html
ChoozeDisplay - Example
Choose your favorite Sports:
Football
Basketball
Tennis
Choose your preferred OS:
Windows
MacOS
Linux
Select your Favorite Fruit:
Select fruit...
Apple
Banana
Orange
Selecting Apple, and Football is good with Windows.
Selecting Apple, and Football is good with macOS.
Selecting Apple, and Basketball is good with Windows.
Selecting Apple, and Basketball is good with macOS.
Selecting Banana, and Football is good with Windows.
Selecting Banana, and Football is good with macOS.
Selecting Banana, and Basketball is good with Windows.
Selecting Banana, and Basketball is good with macOS.
Selecting Orange, and Football is good with Windows.
Selecting Orange, and Football is good with macOS.
Selecting Orange, and Basketball is good with Windows.
Selecting Orange, and Basketball is good with macOS.
$(document).ready(function() {
const options = {
triggerControls: [
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'apple' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#apple-football-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'apple' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#apple-football-macos-info'
},
// Add the rest of the configurations here...
]
};
// Initialize the plugin with an option object
$(document).ChoozeDisplay(options);
// Initialize the plugin to read from attributes
$('[data-target]').ChoozeDisplay();
});
```
## Options
| Option | Type | Description |
|-------------------|--------|--------------------------------------------------------------------------------------------------------|
| `triggerControls` | Array | An array of objects defining the conditions and target elements for showing or hiding content. |
| `conditions` | Array | An array of condition objects, each defining the type of input, ID or name, value, and state to match. |
| `action` | String | The action to perform when the conditions are met (`show` or `hide`). |
| `target` | String | The selector for the target element to show or hide. |
## Demo
Here's a
Demo example:
[Demo](https://hichemtab-tech.github.io/ChoozeDisplay-js)
## Contributing
Contributions are always welcome!
If you have any ideas, improvements, or bug fixes,
please [open an issue](https://github.com/HichemTab-tech/ChoozeDisplay-js/issues)
or [submit a pull request](https://github.com/HichemTab-tech/ChoozeDisplay-js/pulls).
## Author
- [HichemTab-tech](https://www.github.com/HichemTab-tech)
## License
[MIT](https://github.com/HichemTab-tech/ChoozeDisplay-js/blob/master/LICENSE)