jquery - How to achieve accordion functionality with load more option? -
i want display categories accordion load more functionality. first time, want display 3-4 categories, want displaying remaining categories after click on load more link. should load less if click again on link.
for ref. please see screenshot : https://drive.google.com/file/d/0b4pokeydrxwebhjabmdxbfvty2m/view
i using below code :
<div class="cat-dropdown" style="margin:25px 0; width:100%; float:left; clear:both"> <?php $parentcatid = mage::registry('current_category')->getid(); $root = mage::getmodel('catalog/category')->load($parentcatid); $subcat = explode(',',$root->getchildren()); $collection = $root ->getcollection() ->addattributetoselect("*") ->addfieldtofilter("entity_id", array("in", $subcat) ); ?> <div class="products-grid first odd brand_list1"> <?php foreach($collection $catname){ $qty = mage::getmodel('catalog/category')->load($catname->getid())->getproductcount();?> <div class="selected item<?php if (($i - 1) % $_columncount == 0): ?> first<?php elseif ($i % $_columncount == 0): ?> last<?php endif; ?>"> <div class="cat-custom-img"> <h2 class="lavel-1"><a href="<?php echo $catname->geturl(); ?>"><?php echo $catname->getname(); ?></a></h2> <?php if($catname['sliderimage']) { ?> <img src="<?php echo mage::getbaseurl('media').'catalog/category/'.$catname['sliderimage']; ?>" alt= "" > <?php } ?> </div> <?php $_category = mage::getmodel('catalog/category')->load($catname->getid()) ?> <?php $_subcategories = $_category->getchildrencategories() ?> <?php if (count($_subcategories) > 0){ ?> <div class="catlist-toggle"> <div class="catlist-toggle-inner"> <ul class="second_level_cat mylist"> <?php $limit=1; ?> <?php foreach($_subcategories $_subcategory){ ?> <li class="hide"> <h2><a href="<?php echo $_subcategory->geturl(); ?>"> <?php echo $_subcategory->getname(); ?> </a> </h2> <?php $_subcategory1 = mage::getmodel('catalog/category')->load($_subcategory->getid()) ?> <?php $_subsubcategories1 = $_subcategory1->getchildrencategories() ?> <?php if (count($_subsubcategories1) > 0){ ?> <ul class="third_level_cat mylist"> <?php foreach($_subsubcategories1 $_subsubcategory){ ?> <li class="hide"> <h2><a href="<?php echo $_subsubcategory->geturl(); ?>" > <?php echo $_subsubcategory->getname(); ?> </a></h2> <?php $_subcategory2 = mage::getmodel('catalog/category')->load($_subsubcategory->getid()) ?> <?php $_subsubcategories2 = $_subcategory2->getchildrencategories() ?> <?php if (count($_subsubcategories2) > 0){ ?> <ul class="fourth_level_cat mylist"> <?php foreach($_subsubcategories2 $_subsubcategory2){ ?> <li class="hide"> <h2><a href="<?php echo $_subsubcategory2->geturl(); ?>" > <?php echo $_subsubcategory2->getname(); ?> </a></h2> </li> <?php } ?> </ul> <?php } ?> </li> <?php } ?> </ul> <?php } ?> </li> <?php $limit++; ?> <?php // if($limit == 3){break;} ?> <?php } ?> <li class=""><div class="load-more">load more</div></li> </ul> </div> </div> <?php } ?> </div> <?php } ?> </div> </div> <script> jquery('.cat-dropdown').navaccordion({ expandbuttontext : "+", collapsebuttontext: "-", selectedexpand: "true", selectedclass: "selected", buttonposition: "right", headersonly: false, headersonlycheck: false, delaylink: false, delayamount: null }); </script> <script> jquery(document).ready(function(){ jquery(".load-more").click(function(){ jquery(this).closest('.selected').find('.catlist-toggle').toggleclass('expand'); }); jquery(".accordion-btn").click(function(){ jquery(this).closest('.selected').find('.catlist-toggle').addclass('expand'); }); }); </script> <style> .selected.item{width: 23%;float: left;margin: 0 10px 55px 10px;} .catlist-toggle{position: relative; } .catlist-toggle.expand{height:auto;overflow:initial;} .catlist-toggle.expand .catlist-toggle-inner ul{height:auto;overflow:initial;} .catlist-toggle .catlist-toggle-inner{position: relative; width: 100%; top:0; left: 0; background:#fff; z-index:9999;} .catlist-toggle .catlist-toggle-inner ul{ z-index:9999; height: 220px;overflow:hidden; width:100%;} .catlist-toggle .load-more{position: absolute; width: 100%; bottom:0; left: 0; background:#ddd; color:#000;} .cat-custom-img .level-1{ width: 70%;} .cat-custom-img img{ width: 20%;float: right; margin-top: -71px;} </style>
use below code:
<div class="" style="margin:25px 0; width:100%; float:left; clear:both"> <?php $parentcatid = mage::registry('current_category')->getid(); $root = mage::getmodel('catalog/category')->load($parentcatid); $subcat = explode(',',$root->getchildren()); $collection = $root ->getcollection() ->addattributetoselect("*") ->addfieldtofilter("entity_id", array("in", $subcat) ); ?> <div class="accord-outer"> <?php foreach($collection $catname){ ?> <div class="accord-section"> <div class="accord"> <ul> <?php $qty = mage::getmodel('catalog/category')->load($catname->getid())->getproductcount();?> <li class="selected parent"> <a href="<?php echo $catname->geturl(); ?>"><?php echo $catname->getname(); ?></a> <?php if($catname['sliderimage']) { ?> <img src="<?php echo mage::getbaseurl('media').'catalog/category/'.$catname['sliderimage']; ?>" alt= "" > <?php } ?> </li> <?php $_category = mage::getmodel('catalog/category')->load($catname->getid()) ?> <?php $_subcategories = $_category->getchildrencategories() ?> <?php if (count($_subcategories) > 0){ ?> <?php $limit=1; ?> <?php foreach($_subcategories $_subcategory){ ?> <li class="parent"> <a href="<?php echo $_subcategory->geturl(); ?>"> <?php echo $_subcategory->getname(); ?> </a> <?php $_subcategory1 = mage::getmodel('catalog/category')->load($_subcategory->getid()) ?> <?php $_subsubcategories1 = $_subcategory1->getchildrencategories() ?> <?php if (count($_subsubcategories1) > 0){ ?> <ul class=""> <?php foreach($_subsubcategories1 $_subsubcategory){ ?> <li class=""> <a href="<?php echo $_subsubcategory->geturl(); ?>" > <?php echo $_subsubcategory->getname(); ?> </a> <?php $_subcategory2 = mage::getmodel('catalog/category')->load($_subsubcategory->getid()) ?> <?php $_subsubcategories2 = $_subcategory2->getchildrencategories() ?> <?php if (count($_subsubcategories2) > 0){ ?> <ul class=""> <?php foreach($_subsubcategories2 $_subsubcategory2){ ?> <li class=""> <a href="<?php echo $_subsubcategory2->geturl(); ?>" > <?php echo $_subsubcategory2->getname(); ?> </a> </li> <?php } ?> </ul> <?php } ?> </li> <?php } ?> </ul> <?php } ?> </li> <?php $limit++; ?> <?php } ?> <?php } ?> <li class="parent load"><span class="loadmore">load more</span><span class="loadless">load less</span></li> </ul> </div> </div> <?php } ?> </div> </div> <script> jquery('document').ready(function(){ jquery('.accord').navaccordion({ // text inside of expand button expandbuttontext : "+", // text inside of collapse button collapsebuttontext: "-", // expand selected channel selectedexpand: "true", // class used detect selected channel // check "parentelement" class (the parent <li> default) selectedclass: "selected", // apply accordion levels // setting false apply accordion first level multiplelevels: "true", // width of accordion expand/collapse button percentage or pixels buttonwidth: "20%", // position of button buttonposition: "right", // speed of slide animation // "fast", "slow", or number in milliseconds such 500 slidespeed: "fast", // parent element type, class or id // don't need change if you're using ul > li > ul pattern parentelement: "li", // child element type, class or id // don't need change if you're using ul > li > ul pattern childelement: "ul", // setting true make link sub-nav behave if set header only, making link inaccessible // option useful if using plugin non-navigation area headersonly: false, // setting true apply accordion links set "header only" (have no href) headersonlycheck: false, // delay following href of links until after accordion has expanded delaylink: false, // time in milliseconds delay before following href - use "slidespeed" default if nothing else set delayamount: null }); function accord(ac){ //console.log(ac); var total = jquery(ac).find('ul li.parent').length; //console.log(total); if(total > 5){ jquery(ac).find('ul li.parent').each(function(i) { if(i==1){ jquery( ).toggleclass( "visible" ); } else if(i<=3){ jquery( ).toggleclass( "visible" ); } else if(i == (total-1)){ jquery( ).addclass( "button" ); } else{ jquery( ).toggleclass( "hidden" ); } }); } else{ jquery(ac).find('ul li.parent.load').hide(); //alert('afsdfdf'); } } jquery('.accord-outer .accord-section').each(function(){ accord(jquery(this).children('.accord')); }) jquery('.load').click(function(event){ accord(jquery(this).closest('.accord')); jquery(this).find('.loadless').removeclass("accordion-active"); jquery(this).find('.loadless').toggleclass("active"); jquery(this).find('.loadmore').toggleclass("active"); }); jquery(".loadless").click(function(){ jquery(this).closest('.accord').find('li.parent.active ul').css('display', 'none'); jquery(this).closest('.accord').find('li.parent.active .accordion-collapsed').css('display', 'inline-block'); jquery(this).closest('.accord').find('li.parent.active .accordion-expanded').css('display', 'none'); }); }); </script> <style> .accord-outer{width:100%; float:left;} .accord{width:25%; float:left; margin:0 0 20px;} .visible{display:block;} .hidden{display:none;} .loadmore{display:inline-block;} .loadless{display:none;} .loadmore.active{display:none;} .loadless.active{display:inline-block;} .accord { background: #46cfb0; width: 25%;} /* first level */ .accord ul {margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #1abc9c; } .accord ul li { border-top: 1px solid #1abc9c; } .accord ul li { color: #ffffff; display: block; font-size: 1.1em; line-height: normal; padding: 12px 20px; text-decoration: none; } .accord ul li a:hover { background: #e95546; text-decoration: none; /* second level */ .accord ul ul { border-bottom: none } .accord ul ul li { border-top: 1px solid #46cfb0; background: #34bc9d; } .accord ul ul li { color: #ffffff; display: block; font-size: 1em; line-height: normal; padding: 0.5em 1em 0.5em 2.5em; } .accord ul ul li a:hover { background: #e95546; } /* third level */ .accord ul ul ul { border-top: 1px solid #46cfb0; } .accord ul ul ul li { border: none; } .accord ul ul ul li { padding-left: 3.5em; padding-top: 0.25em; padding-bottom: 0.25em; } /* accordion button */ ul li.has-subnav .accordion-btn { color: #fff; background: rgba(255,255,255, 0.15); font-size: 16px; } </style>
Comments
Post a Comment