Simple jQuery Plugin for Collapsible JSON Display | simpleJson

simpleJson is a simple jQuery plugin for collapsible Json rendering that can render complex JSON data as a nested, collapsible, and readable tree structure.

javascript css image file To use the plugin, simply include the above 3 files in your project (note that depending on where you place the image file on your site, it may be necessary to update the css file accordingly) and ensure that the javascript file is included after adding jQuery ( pretty much any version of jQuery will do).

Must Read: A Collapsible jQuery Menu jQuery Plugin For Bootstrap

How to make use of it:

1. Insert the jQuery simpleJson plugin’s information on the web page.

<link rel="stylesheet" href="/path/to/css/simpleJson.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/simpleJson.js"></script>

2. Create a container to carry the JSON tree.

<div id="example"></div>

3. Initialize the plugin on the tree container and outline your personal JSON information as follows.

const myData = [
      {
        color: "red",
        value: "#f00"
      },
      {
        color: "green",
        value: "#0f0"
      },
      {
        color: "blue",
        value: "#00f"
      },
      {
        color: "cyan",
        value: "#0ff"
      },
      {
        color: "magenta",
        value: "#f0f"
      },
      {
        color: "yellow",
        value: "#ff0"
      },
      {
        color: "black",
        value: "#000"
      }
]
$("#example").empty().simpleJson({ 
  jsonObject: myData 
});

4. Customize the collapsed text.

$("#example").empty().simpleJson({ 
  jsonObject: myData,
  collapsedText: "......"
});

Options

The following options are available:

Must Read: Minimalist Simple Open-Source Palm Tree CSS Library

PropertyDescriptionRequired
jsonObjectThe object which should be renderedY
collapsedTextThe text which should be shown whilst an object has been collapsed (Defaults to ‘…’)N

See Demo And Download

simple-collapsible-json-plugin

Official Website(borsuksoftware): Click Here

This superior jQuery/javascript plugin is developed by borsuksoftware. For extra Advanced Usage, please go to the official website.

Related Posts

VenoBox-Responsive-jQuery-Lightbox-Plugin

Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…

bootstrap-dropdown-on-hover

[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Leave a Reply

Your email address will not be published. Required fields are marked *