Loading, please wait...

ARTDESIGN GROUP PANEL CONTENTS

SETTINGS

Attributes

data-plugin-ad-group-panel-contents="ad-group-panel-contents"

This attribute is required in order to applied the plugin on the desired element
<div data-plugin-ad-group-panel-contents="ad-group-panel-contents">
    <div data-ad-group-panel-contents-title="TITLE ONE" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-hash="ContentOne">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div data-ad-group-panel-contents-title="TITLE TWO" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-options="NoBorderRadius" data-ad-group-panel-contents-hash="ContentTwo">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div data-ad-group-panel-contents-title="TITLE THREE" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-options="NoBorderRadius" data-ad-group-panel-contents-hash="ContentThree">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar.
    </div>
</div>

data-ad-group-panel-contents-options="Blue, ContentColorGray"

This attribute overwrites the settings of the plugin
<div data-plugin-ad-group-panel-contents="ad-group-panel-contents">
    <div data-ad-group-panel-contents-title="TITLE ONE" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-hash="ContentOne">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div data-ad-group-panel-contents-title="TITLE TWO" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-options="NoBorderRadius" data-ad-group-panel-contents-hash="ContentTwo">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div data-ad-group-panel-contents-title="TITLE THREE" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-options="NoBorderRadius" data-ad-group-panel-contents-hash="ContentThree">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar.
    </div>
</div>

data-ad-panel-content-title="TITLE"

This attribute sets title of the panel
<div data-plugin-ad-group-panel-contents="ad-group-panel-contents">
    <div data-ad-group-panel-contents-title="TITLE ONE" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-hash="ContentOne">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div data-ad-group-panel-contents-title="TITLE TWO" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-options="NoBorderRadius" data-ad-group-panel-contents-hash="ContentTwo">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div data-ad-group-panel-contents-title="TITLE THREE" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-options="NoBorderRadius" data-ad-group-panel-contents-hash="ContentThree">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar.
    </div>
</div>

data-ad-panel-content-title-icon="icon-info-4"

This attribute sets icon to the title of the panel
<div data-plugin-ad-group-panel-contents="ad-group-panel-contents">
    <div data-ad-group-panel-contents-title="TITLE ONE" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-hash="ContentOne">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div data-ad-group-panel-contents-title="TITLE TWO" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-options="NoBorderRadius" data-ad-group-panel-contents-hash="ContentTwo">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div data-ad-group-panel-contents-title="TITLE THREE" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-options="NoBorderRadius" data-ad-group-panel-contents-hash="ContentThree">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar.
    </div>
</div>

data-ad-panel-content-status="Open"

This attribute sets status Open to the content
<div data-plugin-ad-group-panel-contents="ad-group-panel-contents">
    <div data-ad-group-panel-contents-title="TITLE ONE" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-hash="ContentOne">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div data-ad-group-panel-contents-title="TITLE TWO" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-options="NoBorderRadius" data-ad-group-panel-contents-hash="ContentTwo">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div data-ad-group-panel-contents-title="TITLE THREE" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-options="NoBorderRadius" data-ad-group-panel-contents-hash="ContentThree">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar.
    </div>
</div>

data-ad-group-panel-contents-hash="ContentOne"

This attribute sets Hash value to the panel
<div data-plugin-ad-group-panel-contents="ad-group-panel-contents" data-ad-group-panel-contents-options="Hash">
    <div data-ad-group-panel-contents-title="TITLE ONE" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-hash="ContentOne">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div data-ad-group-panel-contents-title="TITLE TWO" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-options="NoBorderRadius" data-ad-group-panel-contents-hash="ContentTwo">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div data-ad-group-panel-contents-title="TITLE THREE" data-ad-group-panel-contents-title-icon="icon-info-4" data-ad-group-panel-contents-options="NoBorderRadius" data-ad-group-panel-contents-hash="ContentThree">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices mauris ut odio scelerisque pulvinar.
    </div>
</div>

Public Methods

Destroy

<script type="text/javascript">
    var GroupPanelContents = $(".ArtDesign").ArtDesignGroupPanelContents();
    GroupPanelContents.Destroy();
</script>

Default Options

<script type="text/javascript">
    Global: { // Global settings of the element
        Float: "", // Positions element to the left or right; Must be string (left, right); By default: ""
        MaxWidth: "", // Set the MaxWidth of the element; Must be string (px, %, auto); By default: ""
        Width: "100%", // Set the Width; Must be string (px, %, auto); By default: "100%"
        AutoClose: true, // If it is true it sets Auto Close; Must be boolean; By default: true
        Hash: false // If it is true the hash property sets or returns the anchor part of a URL, including the hash sign (#); Must be boolean; By default: false
    },
    BrowserSupport: { // Settings for the browser support
        Chrome: 20, // Indicates the require minimum version of the Chrome browser; Must be integer; By default: 20
        Mozilla: 20, // Indicates the require minimum version of the Mozilla browser; Must be integer; By default: 20
        Opera: 20, // Indicates the require minimum version of the Opera browser; Must be integer; By default: 20
        Safari: 5, // Indicates the require minimum version of the Safari browser; Must be integer; By default: 5
        MSIE: 9, // Indicates the require minimum version of the MSIE browser; Must be integer; By default: 9
        MSEdge: 12 // Indicates the require minimum version of the MSEdge browser; Must be integer; By default: 12
    }
</script>