PCUI

Include in your HTML

Copied successfully!

<link href="~/PCUIAssets/PCUI/Common/icons/pelicorp/IconsBundle.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/ViewToggleContainer/css/ViewToggleContainer.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Components/ViewToggleContainer/js/ViewToggleContainer.js"></script>

Container with Vertical toolbar

Notation:

- To set toolbar preset state, add "active" class on a tag tha contains toolbar-button class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra nibh mauris, sed ullamcorper dolor consequat ac. Suspendisse faucibus arcu eget facilisis rhoncus. Integer turpis tellus, placerat vel pretium non, ullamcorper quis odio. Nam scelerisque bibendum odio, vitae hendrerit diam viverra eget. Cras ornare cursus nisl pharetra porta. Quisque arcu enim, sagittis vitae molestie ac, mollis id tortor. Mauris purus mi, pharetra non massa quis, volutpat ullamcorper urna. Sed malesuada volutpat elit et aliquam. Nullam risus felis, eleifend sed ultricies non, sagittis eget arcu. Sed hendrerit eleifend sapien sed rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget urna velit.

Copied successfully!


                <div class="view-toggle-main-container">
                <div class="view-toggle-container-left">
                <div class="content-container">
                
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra nibh mauris, sed ullamcorper dolor consequat ac. Suspendisse faucibus arcu eget facilisis rhoncus. Integer turpis tellus, placerat vel pretium non, ullamcorper quis odio. Nam scelerisque bibendum odio, vitae hendrerit diam viverra eget. Cras ornare cursus nisl pharetra porta. Quisque arcu enim, sagittis vitae molestie ac, mollis id tortor. Mauris purus mi, pharetra non massa quis, volutpat ullamcorper urna. Sed malesuada volutpat elit et aliquam. Nullam risus felis, eleifend sed ultricies non, sagittis eget arcu. Sed hendrerit eleifend sapien sed rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget urna velit.
                </p>
                </div>
                <div class="view-toggle-container">
                <a href="javascript:void(0)" role="button" class="toolbar-button" toggle-width="100%">
                <span class="pelcorp-pelcorp-dual-panel-white-100w">
                <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
                </span>
                </a>
                <a href="javascript:void(0)" role="button" class="toolbar-button" toggle-width="66%">
                <span class="pelcorp-pelcorp-dual-panel-white-66w">
                <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
                </span>
                </a>
                <a href="javascript:void(0)" role="button" class="toolbar-button active" toggle-width="50%">
                <span class="pelcorp-pelcorp-dual-panel-white-50w">
                <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
                </span>
                </a>
                <a href="javascript:void(0)" role="button" class="toolbar-button " toggle-width="33%">
                <span class="pelcorp-pelcorp-dual-panel-white-33w">
                <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
                </span>
                </a>
                <a href="javascript:void(0)" role="button" class="toolbar-button" toggle-width="0">
                <span class="pelcorp-pelcorp-dual-panel-white-0w">
                <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
                </span>
                </a>
                </div>
                </div>
                <div class="view-toggle-container-right">
                <div class="content-container">
                
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra nibh mauris, sed ullamcorper dolor consequat ac. Suspendisse faucibus arcu eget facilisis rhoncus. Integer turpis tellus, placerat vel pretium non, ullamcorper quis odio. Nam scelerisque bibendum odio, vitae hendrerit diam viverra eget. Cras ornare cursus nisl pharetra porta. Quisque arcu enim, sagittis vitae molestie ac, mollis id tortor. Mauris purus mi, pharetra non massa quis, volutpat ullamcorper urna. Sed malesuada volutpat elit et aliquam. Nullam risus felis, eleifend sed ultricies non, sagittis eget arcu. Sed hendrerit eleifend sapien sed rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget urna velit.
                </p>
                </div>
                </div>
                </div>

Container with horizontal toolbar

Notation:

- To use horizontal toolbar, add "horizontal-container" class to the main container that contains "view-toggle-main-container"class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra nibh mauris, sed ullamcorper dolor consequat ac. Suspendisse faucibus arcu eget facilisis rhoncus. Integer turpis tellus, placerat vel pretium non, ullamcorper quis odio. Nam scelerisque bibendum odio, vitae hendrerit diam viverra eget. Cras ornare cursus nisl pharetra porta. Quisque arcu enim, sagittis vitae molestie ac, mollis id tortor. Mauris purus mi, pharetra non massa quis, volutpat ullamcorper urna. Sed malesuada volutpat elit et aliquam. Nullam risus felis, eleifend sed ultricies non, sagittis eget arcu. Sed hendrerit eleifend sapien sed rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget urna velit.

Copied successfully!


                <div class="view-toggle-main-container horizontal-container">
                <div class="view-toggle-container-left">
                <div class="content-container">
                
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra nibh mauris, sed ullamcorper dolor consequat ac. Suspendisse faucibus arcu eget facilisis rhoncus. Integer turpis tellus, placerat vel pretium non, ullamcorper quis odio. Nam scelerisque bibendum odio, vitae hendrerit diam viverra eget. Cras ornare cursus nisl pharetra porta. Quisque arcu enim, sagittis vitae molestie ac, mollis id tortor. Mauris purus mi, pharetra non massa quis, volutpat ullamcorper urna. Sed malesuada volutpat elit et aliquam. Nullam risus felis, eleifend sed ultricies non, sagittis eget arcu. Sed hendrerit eleifend sapien sed rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget urna velit.
                </p>
                </div>
                <div class="view-toggle-container">
                <a href="javascript:void(0)" role="button" class="toolbar-button" toggle-width="100%">
                <span class="pelcorp-pelcorp-dual-panel-white-100w">
                <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
                </span>
                </a>
                <a href="javascript:void(0)" role="button" class="toolbar-button" toggle-width="66%">
                <span class="pelcorp-pelcorp-dual-panel-white-66w">
                <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
                </span>
                </a>
                <a href="javascript:void(0)" role="button" class="toolbar-button active" toggle-width="50%">
                <span class="pelcorp-pelcorp-dual-panel-white-50w">
                <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
                </span>
                </a>
                <a href="javascript:void(0)" role="button" class="toolbar-button " toggle-width="33%">
                <span class="pelcorp-pelcorp-dual-panel-white-33w">
                <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
                </span>
                </a>
                <a href="javascript:void(0)" role="button" class="toolbar-button" toggle-width="0">
                <span class="pelcorp-pelcorp-dual-panel-white-0w">
                <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
                </span>
                </a>
                </div>
                </div>
                <div class="view-toggle-container-right">
                <div class="content-container">
                
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra nibh mauris, sed ullamcorper dolor consequat ac. Suspendisse faucibus arcu eget facilisis rhoncus. Integer turpis tellus, placerat vel pretium non, ullamcorper quis odio. Nam scelerisque bibendum odio, vitae hendrerit diam viverra eget. Cras ornare cursus nisl pharetra porta. Quisque arcu enim, sagittis vitae molestie ac, mollis id tortor. Mauris purus mi, pharetra non massa quis, volutpat ullamcorper urna. Sed malesuada volutpat elit et aliquam. Nullam risus felis, eleifend sed ultricies non, sagittis eget arcu. Sed hendrerit eleifend sapien sed rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget urna velit.
                </p>
                </div>
                </div>
                </div>

Container with vertical split

Notation:

- By changing the "view-width-33" class, you can change the size of the container.

Classes:
- view-width-0
- view-width-33
- view-width-50
- view-width-66
- view-width-100

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra nibh mauris, sed ullamcorper dolor consequat ac. Suspendisse faucibus arcu eget facilisis rhoncus. Integer turpis tellus, placerat vel pretium non, ullamcorper quis odio. Nam scelerisque bibendum odio, vitae hendrerit diam viverra eget. Cras ornare cursus nisl pharetra porta. Quisque arcu enim, sagittis vitae molestie ac, mollis id tortor. Mauris purus mi, pharetra non massa quis, volutpat ullamcorper urna. Sed malesuada volutpat elit et aliquam. Nullam risus felis, eleifend sed ultricies non, sagittis eget arcu. Sed hendrerit eleifend sapien sed rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget urna velit.

Copied successfully!


                <div class="view-toggle-main-container view-width-33">
                <div class="view-toggle-container-left">
                <div class="content-container">
                
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra nibh mauris, sed ullamcorper dolor consequat ac. Suspendisse faucibus arcu eget facilisis rhoncus. Integer turpis tellus, placerat vel pretium non, ullamcorper quis odio. Nam scelerisque bibendum odio, vitae hendrerit diam viverra eget. Cras ornare cursus nisl pharetra porta. Quisque arcu enim, sagittis vitae molestie ac, mollis id tortor. Mauris purus mi, pharetra non massa quis, volutpat ullamcorper urna. Sed malesuada volutpat elit et aliquam. Nullam risus felis, eleifend sed ultricies non, sagittis eget arcu. Sed hendrerit eleifend sapien sed rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget urna velit.
                </p>
                </div>
                </div>
                <div class="view-toggle-container-right">
                <div class="content-container">
                
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra nibh mauris, sed ullamcorper dolor consequat ac. Suspendisse faucibus arcu eget facilisis rhoncus. Integer turpis tellus, placerat vel pretium non, ullamcorper quis odio. Nam scelerisque bibendum odio, vitae hendrerit diam viverra eget. Cras ornare cursus nisl pharetra porta. Quisque arcu enim, sagittis vitae molestie ac, mollis id tortor. Mauris purus mi, pharetra non massa quis, volutpat ullamcorper urna. Sed malesuada volutpat elit et aliquam. Nullam risus felis, eleifend sed ultricies non, sagittis eget arcu. Sed hendrerit eleifend sapien sed rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget urna velit.
                </p>
                </div>
                </div>
                </div>

Container with horizontal split

Notation:

- By changing the "view-width-33" class, you can change the size of the container.

Classes:
- view-width-0
- view-width-33
- view-width-50
- view-width-66
- view-width-100

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra nibh mauris, sed ullamcorper dolor consequat ac. Suspendisse faucibus arcu eget facilisis rhoncus. Integer turpis tellus, placerat vel pretium non, ullamcorper quis odio. Nam scelerisque bibendum odio, vitae hendrerit diam viverra eget. Cras ornare cursus nisl pharetra porta. Quisque arcu enim, sagittis vitae molestie ac, mollis id tortor. Mauris purus mi, pharetra non massa quis, volutpat ullamcorper urna. Sed malesuada volutpat elit et aliquam. Nullam risus felis, eleifend sed ultricies non, sagittis eget arcu. Sed hendrerit eleifend sapien sed rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget urna velit.

Copied successfully!


                <div class="view-toggle-main-container horizontal-container view-width-33">
                <div class="view-toggle-container-left">
                <div class="content-container">
                
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra nibh mauris, sed ullamcorper dolor consequat ac. Suspendisse faucibus arcu eget facilisis rhoncus. Integer turpis tellus, placerat vel pretium non, ullamcorper quis odio. Nam scelerisque bibendum odio, vitae hendrerit diam viverra eget. Cras ornare cursus nisl pharetra porta. Quisque arcu enim, sagittis vitae molestie ac, mollis id tortor. Mauris purus mi, pharetra non massa quis, volutpat ullamcorper urna. Sed malesuada volutpat elit et aliquam. Nullam risus felis, eleifend sed ultricies non, sagittis eget arcu. Sed hendrerit eleifend sapien sed rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget urna velit.
                </p>
                </div>
                </div>
                <div class="view-toggle-container-right">
                <div class="content-container">
                
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra nibh mauris, sed ullamcorper dolor consequat ac. Suspendisse faucibus arcu eget facilisis rhoncus. Integer turpis tellus, placerat vel pretium non, ullamcorper quis odio. Nam scelerisque bibendum odio, vitae hendrerit diam viverra eget. Cras ornare cursus nisl pharetra porta. Quisque arcu enim, sagittis vitae molestie ac, mollis id tortor. Mauris purus mi, pharetra non massa quis, volutpat ullamcorper urna. Sed malesuada volutpat elit et aliquam. Nullam risus felis, eleifend sed ultricies non, sagittis eget arcu. Sed hendrerit eleifend sapien sed rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget urna velit.
                </p>
                </div>
                </div>
                </div>

View Toggle Container