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.

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:

npm install choozedisplay-js

CDN

You can also include ChoozeDisplay directly from a CDN by adding the following script tag to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/choozedisplay-js@latest/dist/ChoozeDisplay.min.js"></script>

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:

<script src="path/to/ChoozeDisplay.min.js"></script>

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:

<!-- Checkbox Input -->
<div class="container mt-3 bg-light p-5 rounded">
    <h2 class="mb-3">Choose your favorite Sports:</h2>
    <div class="form-check mb-3">
        <input class="form-check-input" type="checkbox" value="" id="football">
        <label class="form-check-label" for="football">Football</label>
    </div>
    <div class="form-check mb-3">
        <input class="form-check-input" type="checkbox" value="" id="basketball">
        <label class="form-check-label" for="basketball">Basketball</label>
    </div>
    <div class="form-check mb-3">
        <input class="form-check-input" type="checkbox" value="" id="tennis">
        <label class="form-check-label" for="tennis">Tennis</label>
    </div>
</div>

<!-- Radio Input -->
<div class="container mt-3 bg-light p-5 rounded">
    <h2 class="mb-3">Choose your preferred OS:</h2>
    <div class="form-check mb-3">
        <input class="form-check-input" type="radio" name="os" id="windows" value="windows">
        <label class="form-check-label" for="windows">Windows</label>
    </div>
    <div class="form-check mb-3">
        <input class="form-check-input" type="radio" name="os" id="macos" value="macos">
        <label class="form-check-label" for="macos">MacOS</label>
    </div>
    <div class="form-check mb-3">
        <input class="form-check-input" type="radio" name="os" id="linux" value="linux">
        <label class="form-check-label" for="linux">Linux</label>
    </div>
</div>

<!-- Select Input -->
<div class="container mt-3 bg-light p-5 rounded">
    <h2 class="mb-3">Select your Favorite Fruit:</h2>
    <select class="form-select mb-3" aria-label="Favorite Fruit" id="fruits">
        <option selected>Select fruit...</option>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
    </select>
</div>

<div class="container mt-5 bg-light p-5 rounded">

    <div class="alert alert-secondary" id="apple-football-windows-info" style="display:none;">Selecting Apple, and Football is good with Windows.</div>
    <div class="alert alert-success" id="apple-football-macos-info" style="display:none;">Selecting Apple, and Football is good with macOS.</div>
    <div class="alert alert-danger" id="apple-basketball-windows-info" style="display:none;">Selecting Apple, and Basketball is good with Windows.</div>
    <div class="alert alert-warning" id="apple-basketball-macos-info" style="display:none;">Selecting Apple, and Basketball is good with macOS.</div>
    <div class="alert alert-info" id="banana-football-windows-info" style="display:none;">Selecting Banana, and Football is good with Windows.</div>
    <div class="alert alert-light" id="banana-football-macos-info" style="display:none;">Selecting Banana, and Football is good with macOS.</div>
    <div class="alert alert-dark" id="banana-basketball-windows-info" style="display:none;">Selecting Banana, and Basketball is good with Windows.</div>
    <div class="alert alert-primary" id="banana-basketball-macos-info" style="display:none;">Selecting Banana, and Basketball is good with macOS.</div>
    <div class="alert alert-secondary" id="orange-football-windows-info" style="display:none;">Selecting Orange, and Football is good with Windows.</div>
    <div class="alert alert-success" id="orange-football-macos-info" style="display:none;">Selecting Orange, and Football is good with macOS.</div>
    <div class="alert alert-danger" id="orange-basketball-windows-info" style="display:none;">Selecting Orange, and Basketball is good with Windows.</div>
    <div class="alert alert-warning" id="orange-basketball-macos-info" style="display:none;">Selecting Orange, and Basketball is good with macOS.</div>
</div>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ChoozeDisplay - Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <!-- Checkbox Input -->
    <div class="container mt-3 bg-light p-5 rounded">
        <h2 class="mb-3">Choose your favorite Sports:</h2>
        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" value="" id="football">
            <label class="form-check-label" for="football">Football</label>
        </div>
        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" value="" id="basketball">
            <label class="form-check-label" for="basketball">Basketball</label>
        </div>
        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" value="" id="tennis">
            <label class="form-check-label" for="tennis">Tennis</label>
        </div>
    </div>

    <!-- Radio Input -->
    <div class="container mt-3 bg-light p-5 rounded">
        <h2 class="mb-3">Choose your preferred OS:</h2>
        <div class="form-check mb-3">
            <input class="form-check-input" type="radio" name="os" id="windows" value="windows">
            <label class="form-check-label" for="windows">Windows</label>
        </div>
        <div class="form-check mb-3">
            <input class="form-check-input" type="radio" name="os" id="macos" value="macos">
            <label class="form-check-label" for="macos">MacOS</label>
        </div>
        <div class="form-check mb-3">
            <input class="form-check-input" type="radio" name="os" id="linux" value="linux">
            <label class="form-check-label" for="linux">Linux</label>
        </div>
    </div>

    <!-- Select Input -->
    <div class="container mt-3 bg-light p-5 rounded">
        <h2 class="mb-3">Select your Favorite Fruit:</h2>
        <select class="form-select mb-3" aria-label="Favorite Fruit" id="fruits">
            <option selected>Select fruit...</option>
            <option value="apple">Apple</option>
            <option value="banana">Banana</option>
            <option value="orange">Orange</option>
        </select>
    </div>

    <div class="container mt-5 bg-light p-5 rounded">
        <div class="alert alert-secondary" id="apple-football-windows-info" style="display:none;">Selecting Apple, and Football is good with Windows.</div>
        <div class="alert alert-success" id="apple-football-macos-info" style="display:none;">Selecting Apple, and Football is good with macOS.</div>
        <div class="alert alert-danger" id="apple-basketball-windows-info" style="display:none;">Selecting Apple, and Basketball is good with Windows.</div>
        <div class="alert alert-warning" id="apple-basketball-macos-info" style="display:none;">Selecting Apple, and Basketball is good with macOS.</div>
        <div class="alert alert-info" id="banana-football-windows-info" style="display:none;">Selecting Banana, and Football is good with Windows.</div>
        <div class="alert alert-light" id="banana-football-macos-info" style="display:none;">Selecting Banana, and Football is good with macOS.</div>
        <div class="alert alert-dark" id="banana-basketball-windows-info" style="display:none;">Selecting Banana, and Basketball is good with Windows.</div>
        <div class="alert alert-primary" id="banana-basketball-macos-info" style="display:none;">Selecting Banana, and Basketball is good with macOS.</div>
        <div class="alert alert-secondary" id="orange-football-windows-info" style="display:none;">Selecting Orange, and Football is good with Windows.</div>
        <div class="alert alert-success" id="orange-football-macos-info" style="display:none;">Selecting Orange, and Football is good with macOS.</div>
        <div class="alert alert-danger" id="orange-basketball-windows-info" style="display:none;">Selecting Orange, and Basketball is good with Windows.</div>
        <div class="alert alert-warning" id="orange-basketball-macos-info" style="display:none;">Selecting Orange, and Basketball is good with macOS.</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="path/to/ChoozeDisplay.min.js"></script>
    <script>
    $(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();
    });
    </script>
</body>
</html>

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

Contributing

Contributions are always welcome!

If you have any ideas, improvements, or bug fixes, please open an issue or submit a pull request.

Author

HichemTab-tech

License

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
.github		.github
dist		dist
src		src
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
index.html		index.html
index.js		index.js
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js
webpack.config.js		webpack.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

ChoozeDisplay jQuery Plugin

Overview

Table of Contents

Requirements

Features

Installation

npm

CDN

Local Download

Usage

Example

Options

Demo

Contributing

Author

License

About

Releases 1

Packages

Languages

License

HichemTab-tech/ChoozeDisplay-js

Folders and files

Latest commit

History

Repository files navigation

ChoozeDisplay jQuery Plugin

Overview

Table of Contents

Requirements

Features

Installation

npm

CDN

Local Download

Usage

Example

Options

Demo

Contributing

Author

License

About

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

Packages