Notes
Notes - notes.io |
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-select.min.css">
<!-- icon css-->
<link rel="stylesheet" href="assets/elagent-icon/style.css">
<link rel="stylesheet" href="assets/niceselectpicker/nice-select.css">
<link rel="stylesheet" href="assets/animation/animate.css">
<link rel="stylesheet" href="assets/mcustomscrollbar/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" href="css/style-main.css">
<link rel="stylesheet" href="css/responsive.css">
<title>Docy</title>
</head>
<body class="doc wide-container" data-spy="scroll" data-target="#navbar-example3" data-scroll-animation="true" data-offset="70">
<!-- <div id="preloader">
<div id="ctn-preloader" class="ctn-preloader">
<div class="round_spinner">
<div class="spinner"></div>
<div class="text">
<img src="img/spinner_logo.png" alt="">
<h4><span>Doc</span>y</h4>
</div>
</div>
<h2 class="head">Did You Know?</h2>
<p></p>
</div>
</div> -->
<div class="body_wrapper">
<nav class="navbar navbar-expand-lg menu_one-sub-page menu_purple sticky-nav">
<div class="container">
<a class="navbar-brand header_logo" href="index.html">
<img class="first_logo sticky_logo" src="img/azio-black.svg" srcset="img/logo-2x.png 2x" alt="logo">
<img class="white_logo main_logo" src="img/azio-white.svg" srcset="img/logo-w2x.png 2x" alt="logo">
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="menu_toggle">
<span class="hamburger">
<span></span>
<span></span>
<span></span>
</span>
<span class="hamburger-cross">
<span></span>
<span></span>
</span>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav menu ml-auto">
<li class="nav-item dropdown submenu">
<a href="index.html" class="nav-link dropdown-toggle">Home</a>
<!-- <i class="arrow_carrot-down_alt2 mobile_dropdown_icon" aria-hidden="false"
data-toggle="dropdown"></i>
<ul class="dropdown-menu">
<li class="nav-item active"><a href="index.html" class="nav-link">Creative Helpdesk</a>
</li>
<li class="nav-item"><a href="index-multi.html" class="nav-link">Multi Helpdesk</a></li>
<li class="nav-item"><a href="index-classic.html" class="nav-link">Classic Helpdesk</a>
</li>
</ul> -->
</li>
<!-- <li class="nav-item dropdown submenu mega_menu tab-demo">
<a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Docs</a>
<i class="arrow_carrot-down_alt2 mobile_dropdown_icon" aria-hidden="true"
data-toggle="dropdown"></i>
<ul class="dropdown-menu sub">
<li>
<div class="row">
<div class="col-lg-5 tabHeader">
<ul class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
<li class="nav-item active">
<a class="nav-link" id="v-pills-doc-tab" data-toggle="pill"
href="#v-pills-doc" role="tab" aria-controls="v-pills-doc"
aria-selected="true">Doc Archives</a>
</li>
<li class="nav-item">
<a class="nav-link" id="v-pills-code-tab" data-toggle="pill"
href="#v-pills-code" role="tab" aria-controls="v-pills-code"
aria-selected="false">Elements</a>
</li>
<li class="nav-item">
<a class="nav-link" id="v-pills-layout-tab" data-toggle="pill"
href="#v-pills-layout" role="tab" aria-controls="v-pills-layout"
aria-selected="false">Layouts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="v-pills-tour-tab" data-toggle="pill"
href="#v-pills-tour" role="tab" aria-controls="v-pills-tour"
aria-selected="false">Reference</a>
</li>
<li class="nav-item">
<a class="nav-link" id="v-pills-content-tab" data-toggle="pill"
href="#v-pills-content" role="tab"
aria-controls="v-pills-content"
aria-selected="false">Content</a>
</li>
<li class="nav-item">
<a class="nav-link" id="v-pills-pages-tab" data-toggle="pill"
href="#v-pills-pages" role="tab" aria-controls="v-pills-pages"
aria-selected="false">Other Pages</a>
</li>
</ul>
</div>
<div class="col-lg-7">
<div class="tab-content tabContent" id="v-pills-tabContent">
<div class="tab-pane fade active show" id="v-pills-doc" role="tabpanel"
aria-labelledby="v-pills-doc-tab">
<div class="d-flex">
<ul class="list-unstyled tab_list">
<li> <a href="doc-main.html"> Doc Topics </a> </li>
<li> <a href="archive-doc-single.html"> Single Product </a>
</li>
<li> <a href="archive-doc-multi.html"> Multi Products </a>
</li>
</ul>
</div>
<div class="text">
<a href="doc-main.html">
<p>More Categories</p>
</a>
<a href="doc-main.html">
<p>All docs</p>
</a>
</div>
</div>
<div class="tab-pane fade" id="v-pills-code" role="tabpanel"
aria-labelledby="v-pills-code-tab">
<div class="d-flex">
<ul class="list-unstyled tab_list">
<li><a href="doc-element-tab.html">Tabs</a></li>
<li><a href="doc-element-accordion.html">Accordion</a></li>
<li><a href="doc-element-notice.html">Notice</a></li>
<li><a href="doc-content-tables.html">Tables</a></li>
</ul>
<ul class="list-unstyled tab_list">
<li><a href="doc-element-hotspots.html">Image Hotspots</a>
</li>
<li><a href="doc-element-code.html">Source Code</a></li>
<li><a href="doc-element-lightbox.html">Image Lightbox</a>
</li>
<li><a href="doc-ref-cheatsheet.html">Cheatsheet</a></li>
</ul>
</div>
<div class="text">
<a href="#">
<p>More Categories</p>
</a>
<a href="doc-main.html">
<p>All docs</p>
</a>
</div>
</div>
<div class="tab-pane fade" id="v-pills-layout" role="tabpanel"
aria-labelledby="v-pills-layout-tab">
<div class="d-flex">
<ul class="list-unstyled tab_list">
<li><a href="doc-element-hotspots.html">Left Sidebar</a>
</li>
<li><a href="doc-content-video.html">Full-width</a></li>
<li><a href="doc-layout-banner-gradient.html">Gradient
Banner</a></li>
<li><a href="doc-layout-banner-empty.html">Without
Banner</a></li>
</ul>
</div>
<div class="text">
<a href="#">
<p>More Categories</p>
</a>
<a href="#">
<p>All docs</p>
</a>
</div>
</div>
<div class="tab-pane fade" id="v-pills-tour" role="tabpanel"
aria-labelledby="v-pills-tour-tab">
<div class="d-flex">
<ul class="list-unstyled tab_list w_100">
<li><a href="doc-ref-cheatsheet.html">Cheatsheet</a></li>
<li><a href="doc-ref-footnote.html">Footnotes</a></li>
<li><a href="doc-tour.html">Interface Tour</a></li>
<li><a href="doc-ref-can-use.html">Can I Use</a></li>
<li><a href="doc-content-tooltip.html">Tooltips &
Direction</a></li>
<li><a href="doc-ref-shortcuts.html">Keyboard Shortcuts</a>
</li>
</ul>
</div>
<div class="text">
<a href="#">
<p>More Categories</p>
</a>
<a href="#">
<p>All docs</p>
</a>
</div>
</div>
<div class="tab-pane fade" id="v-pills-content" role="tabpanel"
aria-labelledby="v-pills-content-tab">
<div class="d-flex">
<ul class="list-unstyled tab_list">
<li><a href="doc-content-image.html">Image</a></li>
<li><a class="active"
href="doc-content-tables.html">Tables</a></li>
<li><a href="doc-content-video.html">Video</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="doc-content-tooltip.html">Tooltips &
Direction</a></li>
</ul>
</div>
<div class="text">
<a href="#">
<p>More Categories</p>
</a>
<a href="#">
<p>All docs</p>
</a>
</div>
</div>
<div class="tab-pane fade" id="v-pills-pages" role="tabpanel"
aria-labelledby="v-pills-pages-tab">
<div class="d-flex">
<ul class="list-unstyled tab_list">
<li> <a href="onepage.html">Onepage</a> </li>
<li> <a href="doc-main.html">Doc Topics</a></li>
<li> <a href="doc-tour.html">Cheatsheet</a> </li>
<li> <a href="doc-changelog.html">Changelog</a> </li>
</ul>
</div>
<div class="text">
<a href="#">
<p>More Categories</p>
</a>
<a href="doc-main.html">
<p>All docs</p>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li> -->
<li class="nav-item dropdown submenu">
<a href="blog-grid.html" class="nav-link">
Article
</a>
<!-- <i class="arrow_carrot-down_alt2 mobile_dropdown_icon" aria-hidden="false"
data-toggle="dropdown"></i>
<ul class="dropdown-menu">
<li class="nav-item"><a href="onepage.html" class="nav-link">Onepage Doc</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
<li class="nav-item"><a href="typography.html" class="nav-link">Typography</a></li>
<li class="nav-item"><a href="404-error.html" class="nav-link">404 Error</a></li>
</ul> -->
</li>
<li class="nav-item dropdown submenu">
<a href="contact.html" class="nav-link">
About
</a>
<!-- <i class="arrow_carrot-down_alt2 mobile_dropdown_icon" aria-hidden="false"
data-toggle="dropdown"></i>
<ul class="dropdown-menu">
<li class="nav-item"><a href="forums.html" class="nav-link">Forums Root</a></li>
<li class="nav-item"><a href="forum-topics.html" class="nav-link">Forum Topics</a></li>
<li class="nav-item"><a href="forum-single.html" class="nav-link">Topic Details</a></li>
<li class="nav-item"><a href="forum-profile.html" class="nav-link">User Profile</a></li>
</ul> -->
</li>
<li class="nav-item dropdown submenu active">
<a class="nav-link" href="doc-element-accordion.html">
FAQs
</a>
<!-- <i class="arrow_carrot-down_alt2 mobile_dropdown_icon" aria-hidden="false"
data-toggle="dropdown"></i>
<ul class="dropdown-menu">
<li class="nav-item"><a href="blog-grid.html" class="nav-link">Blog Grid</a></li>
<li class="nav-item"><a href="blog-grid-two.html" class="nav-link">Blog Grid Two</a>
</li>
<li class="nav-item"><a href="blog-list.html" class="nav-link">Blog List</a></li>
<li class="nav-item"><a href="blog-single.html" class="nav-link">Blog Details</a></li>
</ul> -->
</li>
<li class="nav-item dropdown submenu">
<a href="contact.html" class="nav-link">Contact</a>
<!-- <i class="arrow_carrot-down_alt2 mobile_dropdown_icon" aria-hidden="false"
data-toggle="dropdown"></i>
<ul class="dropdown-menu">
<li class="nav-item"><a href="blog-grid.html" class="nav-link">Blog Grid</a></li>
<li class="nav-item"><a href="blog-grid-two.html" class="nav-link">Blog Grid Two</a>
</li>
<li class="nav-item"><a href="blog-list.html" class="nav-link">Blog List</a></li>
<li class="nav-item"><a href="blog-single.html" class="nav-link">Blog Details</a></li>
</ul> -->
</li>
</ul>
<div class="right-nav">
<!-- <a class="nav_btn" href="#">Free Trail</a> -->
<div class="px-2 js-darkmode-btn" title="Toggle dark mode">
<label for="something" class="tab-btn tab-btns">
<ion-icon name="moon"></ion-icon>
</label>
<label for="something" class="tab-btn">
<ion-icon name="sunny"></ion-icon>
</label>
<label class=" ball" for="something"></label>
<input type="checkbox" name="something" id="something" class="dark_mode_switcher">
</div>
</div>
</div>
</div>
</nav>
<!-- <div class="mobile_main_menu dark_menu sticky-nav ">
<div class="container">
<div class="mobile_menu_left">
<button type="button" class="navbar-toggler mobile_menu_btn">
<span class="menu_toggle ">
<span class="hamburger">
<span></span>
<span></span>
<span></span>
</span>
</span>
</button>
<a class="navbar-brand header_logo" href="index.html">
<img class="sticky_logo main_logo logo_light_version" src="img/logo.png" srcset="img/logo-2x.png 2x" alt="logo">
<img class="white_logo logo_dark_version" src="img/logo-w.png" srcset="img/logo-w2x.png 2x" alt="logo">
</a>
</div>
<div class="mobile_menu_right">
<div class="right-nav">
<a class="nav_btn tp_btn" href="https://is.gd/nDvqm2" target="_blank">Get Docy</a>
<div class="px-2 js-darkmode-btn btn" title="Toggle dark mode">
<label for="something2" class="tab-btn tab-btns">
<ion-icon class="light-mode" name="contrast"></ion-icon>
</label>
<input type="checkbox" name="something2" id="something2" class="dark_mode_switcher">
<label for="something2" class="tab-btn">
<ion-icon class="dark-mode" name="contrast-outline"></ion-icon>
</label>
</div>
</div>
</div>
</div>
</div> -->
<!-- <div class="click_capture"></div> -->
<!-- <div class="side_menu">
<div class="mobile_menu_header">
<div class="close_nav">
<i class="arrow_left"></i>
<i class="icon_close"></i>
</div>
<div class="mobile_logo">
<a class="navbar-brand header_logo" href="index.html">
<img class="sticky_logo main_logo logo_light_version" src="img/logo.png" srcset="img/logo-2x.png 2x" alt="logo">
<img class="white_logo logo_dark_version" src="img/logo-w.png" srcset="img/logo-w2x.png 2x" alt="logo">
</a>
</div>
</div>
<div class="mobile_nav_wrapper">
<nav class="mobile_nav_top">
<ul class="navbar-nav menu ml-auto">
<li class="nav-item dropdown submenu">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item dropdown submenu active">
<a href="#" class="nav-link">Docs</a>
<i class="arrow_carrot-down_alt2 mobile_dropdown_icon"></i>
<ul class="dropdown-menu">
<li class="nav-item"><a href="doc-content-video.html" class="nav-link">Doc Archives</a></li>
<li class="nav-item"><a href="doc-main.html" class="nav-link">DocTopics</a></li>
<li class="nav-item dropdown submenu">
<a href="#" class="nav-link">Elements</a>
<i class="arrow_carrot-down_alt2 mobile_dropdown_icon"></i>
<ul class="dropdown-menu">
<li class="nav-item"><a href="doc-element-tab.html" class="nav-link">Tabs</a></li>
<li class="nav-item"><a href="doc-element-accordion.html" class="nav-link active">Accordion</a></li>
<li class="nav-item"><a href="doc-element-notice.html" class="nav-link">Notices</a></li>
<li class="nav-item"><a href="doc-content-tables.html" class="nav-link">Tables</a></li>
<li class="nav-item"><a href="doc-content-tooltip.html" class="nav-link">Tooltips & Direction</a></li>
<li class="nav-item"><a href="doc-element-lightbox.html" class="nav-link">Image Hotspots</a></li>
<li class="nav-item"><a href="doc-element-lightbox.html" class="nav-link">Lightbox</a></li>
<li class="nav-item"><a href="doc-changelog.html" class="nav-link">Changelog</a></li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="#" class="nav-link">Layouts</a>
<i class="arrow_carrot-down_alt2 mobile_dropdown_icon"></i>
<ul class="dropdown-menu">
<li class="nav-item"><a href="doc-element-hotspots.html" class="nav-link">Left Sidebar</a></li>
<li class="nav-item"><a href="doc-content-video.html" class="nav-link">Full-width</a></li>
<li class="nav-item"><a href="doc-layout-banner-gradient.html" class="nav-link">Gradient Banner</a></li>
<li class="nav-item"><a href="doc-layout-banner-empty.html" class="nav-link">Without Banner</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="#" class="nav-link">Pages</a>
<i class="arrow_carrot-down_alt2 mobile_dropdown_icon"></i>
<ul class="dropdown-menu">
<li class="nav-item"><a href="onepage.html" class="nav-link">Onepage Doc</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
<li class="nav-item"><a href="onepage.html" class="nav-link">Onepage Doc</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
<li class="nav-item"><a href="typography.html" class="nav-link">Typography</a></li>
<li class="nav-item"><a href="404-error.html" class="nav-link">404 Error</a></li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="#" class="nav-link">Forum</a>
<i class="arrow_carrot-down_alt2 mobile_dropdown_icon"></i>
<ul class="dropdown-menu">
<li class="nav-item"><a href="forums.html" class="nav-link">Forums Root</a></li>
<li class="nav-item"><a href="forum-topics.html" class="nav-link">Forum Topics</a></li>
<li class="nav-item"><a href="forum-single.html" class="nav-link">Topic Details</a></li>
<li class="nav-item"><a href="forum-profile.html" class="nav-link">User Profile</a></li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a class="nav-link" href="#"> Blog </a>
<i class="arrow_carrot-down_alt2 mobile_dropdown_icon"></i>
<ul class="dropdown-menu">
<li class="nav-item"><a href="blog-grid.html" class="nav-link">Blog Grid</a></li>
<li class="nav-item"><a href="blog-grid-two.html" class="nav-link">Blog Grid Two</a></li>
<li class="nav-item"><a href="blog-list.html" class="nav-link">Blog List</a></li>
<li class="nav-item"><a href="blog-single.html" class="nav-link">Blog Details</a></li>
</ul>
</li>
</ul>
</nav>
<div class="mobile_nav_bottom">
<aside class="doc_left_sidebarlist">
<h2>Docy Documentation</h2>
<div class="scroll">
<ul class="list-unstyled nav-sidebar">
<li class="nav-item">
<a href="doc-main.html" class="nav-link"><img src="img/side-nav/home.png" alt="">Home</a>
</li>
<li class="nav-item">
<a href="doc-element-tab.html" class="nav-link"><img src="img/side-nav/briefcase.png" alt="briefcase">Elements</a>
<span class="icon"><i class="arrow_carrot-down"></i></span>
<ul class="list-unstyled dropdown_nav">
<li><a href="doc-element-tab.html">Tabs</a></li>
<li><a class="active" href="doc-element-accordion.html">Accordion</a></li>
<li><a href="doc-element-notice.html">Notices</a></li>
<li><a href="doc-content-tables.html">Table</a></li>
<li><a href="doc-element-lightbox.html">Image Lightbox</a></li>
<li><a href="doc-element-hotspots.html">Image Hotspots</a></li>
<li><a href="doc-element-code.html">Source Code</a></li>
<li><a href="doc-content-tooltip.html">Tooltip</a></li>
</ul>
</li>
<li class="nav-item">
<a href="doc-content-video.html" class="nav-link"><img src="img/side-nav/layout.png" alt="">Layouts</a>
<span class="icon"><i class="arrow_carrot-down"></i></span>
<ul class="list-unstyled dropdown_nav">
<li><a href="doc-content-video.html">Full-width</a></li>
<li><a href="doc-element-hotspots.html">Left Sidebar</a></li>
<li><a href="doc-layout-banner-gradient.html">Gradient Banner</a></li>
<li><a href="doc-layout-banner-empty.html">Without Banner</a></li>
</ul>
</li>
<li class="nav-item">
<a href="doc-ref-cheatsheet.html" class="nav-link"><img src="img/side-nav/chat1.png" alt="">Reference</a>
<span class="icon"><i class="arrow_carrot-down"></i></span>
<ul class="list-unstyled dropdown_nav">
<li><a href="doc-ref-cheatsheet.html">Cheatsheet</a></li>
<li><a href="doc-ref-footnote.html">Footnotes</a></li>
<li><a href="doc-tour.html">Interface Tour</a></li>
<li><a href="doc-ref-can-use.html">Can I Use</a></li>
<li><a href="doc-content-tooltip.html">Tooltips & Direction</a></li>
<li><a href="doc-ref-shortcuts.html">Keyboard Shortcuts</a></li>
</ul>
</li>
<li class="nav-item active">
<a href="doc-content-image.html" class="nav-link"><img src="img/side-nav/document.png" alt="">Content</a>
<span class="icon"><i class="arrow_carrot-down"></i></span>
<ul class="list-unstyled dropdown_nav">
<li><a href="doc-content-image.html">Image</a></li>
<li><a class="active" href="doc-content-tables.html">Tables</a></li>
<li><a href="doc-content-tooltip.html">Tooltips & Direction</a></li>
<li><a href="doc-element-code.html">Code</a></li>
<li><a href="doc-content-video.html">Video</a></li>
<li><a href="typography.html">Typography</a></li>
</ul>
</li>
<li class="nav-item">
<a href="doc-changelog.html" class="nav-link"><img src="img/side-nav/clock.png" alt="">Change Log</a>
</li>
</ul>
<ul class="list-unstyled nav-sidebar coding_nav">
<li class="nav-item">
<a href="#" class="nav-link"><img src="img/side-nav/account.png" alt="">Account</a>
</li>
<li class="nav-item">
<a href="onepage.html" class="nav-link"><img src="img/side-nav/layout.png" alt="">Onepage Doc</a>
</li>
</ul>
<ul class="list-unstyled nav-sidebar bottom_nav">
<li class="nav-item">
<a href="#" class="nav-link"><img src="img/side-nav/united-states.png" alt="">United States</a>
</li>
<li class="nav-item">
<a href="signup.html" class="nav-link"><img src="img/side-nav/edit.png" alt="">Signup</a>
</li>
<li class="nav-item">
<a href="signin.html" class="nav-link"><img src="img/side-nav/users.png" alt="">Sign In <i class="arrow_right"></i></a>
</li>
</ul>
</div>
</aside>
</div>
</div>
</div> -->
<!--================Forum Breadcrumb Area =================-->
<!-- <section class="doc_banner_area search-banner-light">
<ul class="list-unstyled banner_shap_img">
</ul>
<div class="container">
<div class="doc_banner_content">
<form action="#" class="header_search_form">
<div class="header_search_form_info">
<div class="form-group">
<div class="input-wrapper">
<i class="icon_search"></i>
<input type='search' id="searchbox" autocomplete="off" name="search"
placeholder="Search for Topics...." />
<div class="header_search_form_panel">
<ul class="list-unstyled">
<li>Help Desk
<ul class="list-unstyled search_item">
<li><span>Configuration</span><a href="#">How to edit host and
port?</a></li>
<li><span>Configuration</span><a href="#">The dev Property</a></li>
</ul>
</li>
<li>Support
<ul class="list-unstyled search_item">
<li><span>Pages</span><a href="#">The asyncData Method</a></li>
</ul>
</li>
<li>Documentation
<ul class="list-unstyled search_item">
<li><span>Getting Started</span><a href="#">The asyncData Method</a>
</li>
<li><span>Getting Started</span><a href="#">The asyncData Method</a>
</li>
<li><span>Getting Started</span><a href="#">The asyncData Method</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="header_search_keyword">
<span class="header-search-form__keywords-label">Popular Searches:</span>
<ul class="list-unstyled">
<li class="wow fadeInUp" data-wow-delay="0.2s"><a href="#">Docy Documentation</a>,</li>
<li class="wow fadeInUp" data-wow-delay="0.3s"><a href="#">Tabs Widget</a>,</li>
<li class="wow fadeInUp" data-wow-delay="0.4s"><a href="#">Process Tab</a></li>
</ul>
</div>
</form>
</div>
</div>
</section> -->
<!-- <section class="page_breadcrumb">
<div class="container custom_container">
<div class="row">
<div class="col-sm-7">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page">Docy WordPress Theme</li>
</ol>
</nav>
</div>
<div class="col-sm-5">
<a href="#" class="date"><i class="icon_clock_alt"></i>Updated on March 03, 2020</a>
</div>
</div>
</div>
</section> -->
<!--================End Forum Breadcrumb Area =================-->
<!--================Topic Area =================-->
<section class="doc_documentation_area" id="sticky_doc">
<div class="overlay_bg"></div>
<div class="container custom_container">
<div class="row">
<!-- <div class="col-lg-3 doc_mobile_menu display_none">
<aside class="doc_left_sidebarlist">
<div class="open_icon" id="left">
<i class="arrow_carrot-right"></i>
<i class="arrow_carrot-left"></i>
</div>
<div class="scroll">
<ul class="list-unstyled nav-sidebar">
<li class="nav-item">
<a href="doc-main.html" class="nav-link"><img src="img/side-nav/home.png" alt="">Home</a>
</li>
<li class="nav-item active">
<a href="doc-element-tab.html" class="nav-link"><img src="img/side-nav/briefcase.png" alt="briefcase">Elements</a>
<span class="icon"><i class="arrow_carrot-down"></i></span>
<ul class="list-unstyled dropdown_nav">
<li><a href="doc-element-tab.html">Tabs</a></li>
<li><a href="doc-element-accordion.html" class="active">Accordion</a></li>
<li><a href="doc-element-notice.html">Notices</a></li>
<li><a href="doc-content-tables.html">Table</a></li>
<li><a href="doc-element-hotspots.html">Image Hotspots</a></li>
<li><a href="doc-element-lightbox.html">Image Lightbox</a></li>
<li><a href="doc-element-code.html">Source Code</a></li>
</ul>
</li>
<li class="nav-item">
<a href="doc-element-hotspots.html" class="nav-link"><img src="img/side-nav/layout.png" alt="">Layouts</a>
<span class="icon"><i class="arrow_carrot-down"></i></span>
<ul class="list-unstyled dropdown_nav">
<li><a href="doc-element-hotspots.html">Left Sidebar</a></li>
<li><a href="doc-content-video.html">Full-width</a></li>
<li><a href="doc-layout-banner-gradient.html">Gradient Banner</a></li>
<li><a href="doc-layout-banner-empty.html">Without Banner</a></li>
</ul>
</li>
<li class="nav-item">
<a href="doc-ref-cheatsheet.html" class="nav-link"><img src="img/side-nav/chat1.png" alt="">Reference</a>
<span class="icon"><i class="arrow_carrot-down"></i></span>
<ul class="list-unstyled dropdown_nav">
<li><a href="doc-ref-cheatsheet.html">Cheatsheet</a></li>
<li><a href="doc-ref-footnote.html">Footnotes</a></li>
<li><a href="doc-tour.html">Interface Tour</a></li>
<li><a href="doc-content-tooltip.html">Tooltips & Direction</a></li>
<li><a href="doc-ref-shortcuts.html">Keyboard Shortcuts</a></li>
</ul>
</li>
<li class="nav-item">
<a href="doc-content-image.html" class="nav-link"><img src="img/side-nav/document.png" alt="">Content</a>
<span class="icon"><i class="arrow_carrot-down"></i></span>
<ul class="list-unstyled dropdown_nav">
<li><a href="doc-content-image.html">Image</a></li>
<li><a href="doc-content-tables.html">Tables</a></li>
<li><a href="doc-element-code.html">Code</a></li>
<li><a href="doc-content-video.html">Video</a></li>
<li><a href="doc-content-tooltip.html">Tooltips & Direction</a></li>
<li><a href="typography.html">Typography</a></li>
</ul>
</li>
<li class="nav-item">
<a href="doc-changelog.html" class="nav-link"><img src="img/side-nav/clock.png" alt="">Change Log</a>
</li>
</ul>
<ul class="list-unstyled nav-sidebar coding_nav">
<li class="nav-item">
<a href="#" class="nav-link"><img src="img/side-nav/account.png" alt="">Account</a>
</li>
<li class="nav-item">
<a href="onepage.html" class="nav-link"><img src="img/side-nav/layout.png" alt="">Onepage Doc</a>
</li>
</ul>
<ul class="list-unstyled nav-sidebar bottom_nav">
<li class="nav-item">
<a href="#" class="nav-link"><img src="img/side-nav/united-states.png" alt="">United States</a>
</li>
<li class="nav-item">
<a href="signup.html" class="nav-link"><img src="img/side-nav/edit.png" alt="">Signup</a>
</li>
<li class="nav-item">
<a href="signin.html" class="nav-link"><img src="img/side-nav/users.png" alt="">Sign In <i class="arrow_right"></i></a>
</li>
</ul>
</div>
</aside>
</div> -->
<div class="col-12 doc-middle-content">
<div id="post" class="shortcode_info">
<div class="shortcode_title">
<a class="btn" href="#">Elements</a>
<h1>Tabs Widget</h1>
<p>Welcome to Docy ! Get familiar with the Docy products and explore their features, guides, tips and tools.</p>
</div>
<div class="row">
<div class="col-6">
<div class="toggle_shortcode">
<div class="shortcode_title">
<h4>Toggle</h4>
<p>Switch from one effect, feature, or state to another by using a toggle.</p>
</div>
<a class="toggle_btn" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Super Professional</a>
<div class="collapse multi-collapse show" id="multiCollapseExample1">
<div class="card card-body toggle_body"> A short rod of wood or plastic sewn to one side of a coat or other garment, pushed through a hole or loop on the other side and twisted so as to act as a fastener. Switch from one effect, feature, or state to another by using a toggle. </div>
</div>
<a class="toggle_btn mt-3 collapsed" data-toggle="collapse" href="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">Dashboard</a>
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body toggle_body">
He lost his bottle arse fanny around do one cheesed off crikey bevy mufty the full monty nancy boy cup of tea spend a penny, golly gosh what a plonker.
</div>
</div>
<a class="toggle_btn mt-3 collapsed" data-toggle="collapse" href="#multiCollapseExample3" role="button" aria-expanded="false" aria-controls="multiCollapseExample3">Another Example</a>
<div class="collapse multi-collapse" id="multiCollapseExample3">
<div class="card card-body toggle_body">
He lost his bottle arse fanny around do one cheesed off crikey bevy mufty the full monty nancy boy cup of tea spend a penny, golly gosh what a plonker.
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="toggle_shortcode">
<div class="shortcode_title">
<h4>Toggle</h4>
<p>Switch from one effect, feature, or state to another by using a toggle.</p>
</div>
<a class="toggle_btn" data-toggle="collapse" href="#multiCollapseExamples1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Super Professional</a>
<div class="collapse multi-collapse show" id="multiCollapseExamples1">
<div class="card card-body toggle_body"> A short rod of wood or plastic sewn to one side of a coat or other garment, pushed through a hole or loop on the other side and twisted so as to act as a fastener. Switch from one effect, feature, or state to another by using a toggle. </div>
</div>
<a class="toggle_btn mt-3 collapsed" data-toggle="collapse" href="#multiCollapseExamples2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">Dashboard</a>
<div class="collapse multi-collapse" id="multiCollapseExamples2">
<div class="card card-body toggle_body">
He lost his bottle arse fanny around do one cheesed off crikey bevy mufty the full monty nancy boy cup of tea spend a penny, golly gosh what a plonker.
</div>
</div>
<a class="toggle_btn mt-3 collapsed" data-toggle="collapse" href="#multiCollapseExamples3" role="button" aria-expanded="false" aria-controls="multiCollapseExample3">Another Example</a>
<div class="collapse multi-collapse" id="multiCollapseExamples3">
<div class="card card-body toggle_body">
He lost his bottle arse fanny around do one cheesed off crikey bevy mufty the full monty nancy boy cup of tea spend a penny, golly gosh what a plonker.
</div>
</div>
</div>
</div>
</div>
<!-- <div class="collaps_tabs">
<div class="collaps_tab_inner">
<div class="shortcode_title">
<h4>Accordion</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus,
luctus nec<br /> ullamcorper mattis, pulvinar dapibus leo. Nostra scelerisque fuga
wisi aenean.</p>
</div>
<div class="card doc_accordion">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse"
data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
Conclusions
<svg width="14" height="15" viewBox="0 0 14 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M13 7.38812H1M7 1.38812V13.3881V1.38812Z"
stroke="#6b707f" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg width="14" height="3" viewBox="0 0 14 3" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M13 1.38812H1" stroke="#6b707f" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
data-parent="#accordion">
<div class="card-body toggle_body">
Don't get shirty with me what a plonker on your bike mate bugger all
mate chip shop bits and bobs smashing mush bugger cup of char,
in my
flat.
</div>
</div>
</div>
<div class="card doc_accordion">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse"
data-target="#collapseTwo" aria-expanded="false"
aria-controls="collapseTwo">
Forum
<svg width="14" height="15" viewBox="0 0 14 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M13 7.38812H1M7 1.38812V13.3881V1.38812Z"
stroke="#6b707f" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg width="14" height="3" viewBox="0 0 14 3" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M13 1.38812H1" stroke="#6b707f" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
data-parent="#accordion">
<div class="card-body toggle_body">
He lost his bottle arse fanny around do one cheesed off crikey bevy
mufty the full monty nancy boy cup of tea spend a penny, golly gosh
what a plonker.
</div>
</div>
</div>
<div class="card doc_accordion">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse"
data-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
Reporting
<svg width="14" height="15" viewBox="0 0 14 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M13 7.38812H1M7 1.38812V13.3881V1.38812Z"
stroke="#6b707f" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg width="14" height="3" viewBox="0 0 14 3" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M13 1.38812H1" stroke="#6b707f" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree"
data-parent="#accordion">
<div class="card-body toggle_body">
He lost his bottle arse fanny around do one cheesed off crikey bevy
mufty the full monty nancy boy cup of tea spend a penny, golly gosh
what a plonker.
</div>
</div>
</div>
</div>
</div>
<div class="doc-btm">
<ul class="nav card_tagged">
<li>Tagged: </li>
<li><a href="#">content</a></li>
<li><a href="#">elements</a></li>
<li><a href="#">subscription</a></li>
</ul>
<footer class="help_text" id="help">
<div class="border_bottom"></div>
<div class="row feedback_link">
<div class="col-lg-6">
<h6><i class="icon_mail_alt"></i>Still stuck?
<a href="#" data-toggle="modal" data-target="#exampleModal3">How can we help?</a>
</h6>
</div>
<div class="col-lg-6">
<p>Was this page helpful?
<a href="#" class="h_btn">Yes <span>5</span></a>
<a href="#" class="h_btn red">No <span>3</span></a>
</p>
</div>
</div>
</footer>
</div> -->
</div>
<!-- <div class="row topic_item_tabs inner_tab_list">
<div class="col-lg-6">
<div class="topic_list_item">
<h4>Related articles</h4>
<ul class="navbar-nav">
<li><a href="#"><i class="icon_document_alt"></i>Accordions Widget</a></li>
<li><a href="#"><i class="icon_document_alt"></i>Notice / Message Widget</a>
</li>
<li><a href="#"><i class="icon_document_alt"></i>Cheatsheet</a></li>
<li><a href="#"><i class="icon_document_alt"></i>Image Hotspots Widget</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="topic_list_item">
<h4>Recently viewed articles</h4>
<ul class="navbar-nav">
<li><a href="#"><i class="icon_document_alt"></i>Tabs Widget</a></li>
<li><a href="#"><i class="icon_document_alt"></i>Notice / Message Widget</a>
</li>
<li><a href="#"><i class="icon_document_alt"></i>Cheatsheet</a></li>
<li><a href="#"><i class="icon_document_alt"></i>Image Hotspots Widget</a>
</li>
</ul>
</div>
</div>
</div>
<div class="comment_inner">
<h2 class="c_head">3 Comment</h2>
<ul class="comment_box list-unstyled">
<li class="post_comment">
<div class="media comment_author">
<img class="img_rounded" src="img/blog-single/comment_01.jpg" alt="">
<div class="media-body">
<div class="comment_info">
<h3>Issac Wise</h3>
<div class="comment_date">July 3, 2020 at 2:14 pm</div>
</div>
<p>Wouldn’t it be better practice to use get_the_title(..) in this case?
directly accessing the post object’s data member would bypass
applying filters and enforcing protected and private settings,
unless that’s explicitly desired.</p>
<a href="#" class="comment_reply">Reply <i class="arrow_right"></i></a>
</div>
</div>
<ul class="list-unstyled reply_comment">
<li>
<div class="media comment_author">
<img class="img_rounded" src="img/blog-single/comment_02.jpg"
alt="">
<div class="media-body">
<div class="comment_info">
<h3>Hans Down</h3>
<div class="comment_date">44 mins ago</div>
</div>
<p>Thenks Demo User for Wouldn’t it be better practice to use
get_the_title.</p>
<a href="#" class="comment_reply">Reply <i
class="arrow_right"></i></a>
</div>
</div>
</li>
<li>
<div class="media comment_author">
<img class="img_rounded" src="img/blog-single/comment_03.jpg"
alt="">
<div class="media-body">
<div class="comment_info">
<h3>Hans Down</h3>
<div class="comment_date">44 mins ago</div>
</div>
<p>Dropped a clanger up the kyver easy peasy vagabond victoria
sponge Charles tinkety tonk old fruit argy.!</p>
<a href="#" class="comment_reply">Reply <i
class="arrow_right"></i></a>
</div>
</div>
</li>
</ul>
</li>
<li class="post_comment">
<div class="media comment_author">
<img class="img_rounded" src="img/blog-single/comment_01.jpg" alt="">
<div class="media-body">
<div class="comment_info">
<h3>Chauffina Carr</h3>
<div class="comment_date">04 mins ago</div>
</div>
<p>Wouldn’t it be better practice to use get_the_title(..) in this case?
directly accessing the post object’s data member would bypass
applying filters and enforcing protected and private settings,
unless that’s explicitly desired.</p>
<a href="#" class="comment_reply">Reply <i class="arrow_right"></i></a>
</div>
</div>
</li>
</ul>
</div>
<div class="blog_comment_box topic_comment">
<h2 class="c_head">Leave a Reply</h2>
<p>Your email address will not be published. Required fields are marked *</p>
<form class="get_quote_form row" action="#" method="post">
<div class="col-md-6 form-group">
<input type="text" class="form-control" id="name" required>
<label class="floating-label">Full Name *</label>
</div>
<div class="col-md-6 form-group">
<input type="email" class="form-control" id="email" required>
<label class="floating-label">Email *</label>
</div>
<div class="col-md-12 form-group">
<input type="text" class="form-control" id="web" required>
<label class="floating-label">Website (Optional)</label>
</div>
<div class="col-md-12 form-group">
<textarea class="form-control message" required></textarea>
<label class="floating-label">Comment type...</label>
</div>
<div class="col-md-12 form-group check_input">
<input type="checkbox" id="fruit1" name="fruit-1" value="Apple">
<label for="fruit1">Save my name, email, and website in this browser for the
next time I comment.</label>
</div>
<div class="col-md-12 form-group"><button class="btn action_btn thm_btn"
type="submit">Post
Comment</button></div>
</form>
</div> -->
</div>
<!-- <div class="col-lg-2 col-md-4 doc_right_mobile_menu">
<div class="open_icon" id="right">
<i class="arrow_carrot-left"></i>
<i class="arrow_carrot-right"></i>
</div>
<div class="doc_rightsidebar scroll">
<div class="pageSideSection">
<select id="mySelect" name="os">
<option value="windows" data-content="<i class='fab fa-windows'></i> Windows">Windows</option>
<option value="ios" data-content="<i class='fab fa-apple'></i> Ios">Ios</option>
<option value="linux" data-content="<i class='fab fa-linux'></i> Linux">Linux</option>
</select>
<div id="font-switcher" class="d-flex justify-content-between align-items-center">
<div id="rvfs-controllers" class="fontsize-controllers group"></div>
<a href="javascript:window.print()" class="print"><i class="icon_printer"></i></a>
</div>
<div class="table-of-content">
<h6><i class="icon_ul"></i> CONTENTS</h6>
<nav class="list-unstyled doc_menu" id="navbar-example3">
</nav>
</div>
</div>
</div>
</div> -->
</div>
</div>
</section>
<!--================End Topic Area =================-->
<footer class="forum_footer_area">
<div class="container">
<div class="forum_footer_inner">
<div class="row">
<div class="col-lg-3 col-sm-6">
<aside class="f_widget ab_wd">
<a href="#"><img src="img/forum/forum-footer-logo.png" alt="">SpiderThemes © 2023</a>
<select class="nice_select">
<option value="1">English</option>
<option value="2">Bengali</option>
<option value="3">Euro</option>
<option value="4">Ind</option>
</select>
</aside>
</div>
<div class="col-lg-3 col-sm-6">
<aside class="f_widget f_link_wd">
<ul class="navbar-nav">
<li><a href="#">About </a></li>
<li><a href="#">Privacy and Policy</a></li>
<li><a href="#">Careers</a></li>
</ul>
</aside>
</div>
<div class="col-lg-3 col-sm-6">
<aside class="f_widget f_link_wd">
<ul class="navbar-nav">
<li><a href="#">AdChoices </a></li>
<li><a href="#">Create ad</a></li>
<li><a href="#">Create page</a></li>
</ul>
</aside>
</div>
<div class="col-lg-3 col-sm-6">
<aside class="f_widget f_link_wd">
<ul class="navbar-nav">
<li><a href="#">Tram and Conditions </a></li>
<li><a href="#">Cookies</a></li>
</ul>
</aside>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- How can we help? Form Modal -->
<!-- <div class="modal fade img_modal" id="exampleModal3" tabindex="-3" role="dialog" aria-hidden="false">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class=" icon_close"></i>
</button>
<div class="modal-dialog help_form" role="document">
<div class="modal-content">
<div class="shortcode_title">
<h2>How can we help?</h2>
<p>A premium WordPress theme with integrated Knowledge Base,<br>providing 24/7 community based support.</p>
</div>
<form action="#" class="contact_form">
<div class="row">
<div class="form-group col-lg-6">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group col-lg-6">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group col-lg-12">
<input type="text" class="form-control" placeholder="Subject">
</div>
<div class="form-group col-lg-12">
<textarea name="Message" id="massage" placeholder="Massage"></textarea>
</div>
<div class="form-group col-lg-12">
<button type="submit" class="btn action_btn">Send</button>
</div>
</div>
</form>
</div>
</div>
</div> -->
<!-- Back to top button -->
<a id="back-to-top" title="Back to Top"></a>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap/js/popper.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap/js/bootstrap-select.min.js"></script>
<script src="js/pre-loader.js"></script>
<script src="js/jquery.parallax-scroll.js"></script>
<script src="assets/niceselectpicker/jquery.nice-select.min.js"></script>
<script src="assets/wow/wow.min.js"></script>
<script src="assets/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="assets/font-size/js/rv-jquery-fontsize-2.0.3.min.js"></script>
<script src="js/anchor.js"></script>
<script src="assets/magnify-pop/jquery.magnific-popup.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<script src="js/main.js"></script>
</body>
</html>
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
