javascript - jquery_accordion.js code needed for nested accordions -
i want know new coding, js. capable @ html , css, beyond clueless. however, @ following instructions. have spent days researching , still clueless how fix problem...i have read cannot have multiple accordions open, have seen done...i don't know how. using jquery_accordion.js faq page.
coding have @ top of faq.page.liquid template.
<script type="text/javascript" src="{{ 'jquery_accordion.js' | asset_url }}"></script> $(document).ready(function() { $('.accordion').accordion({ cookiename: 'accordion_nav' }); }); </script>/** * accordion, jquery plugin * * plugin provides accordion cookie support. * * @version 1.1 */ (function($) { $.fn.accordion = function(options) { //firewalling if (!this || this.length < 1) { return this; } initialize(this, options); }; //create initial accordion function initialize(obj, options) { //build main options before element iteration var opts = $.extend({}, $.fn.accordion.defaults, options); //store opened default values set cookie later var opened = ''; //iterate each matched object, bind, , open/close obj.each(function() { var $this = $(this); saveopts($this, opts); //bind event if (opts.bind == 'mouseenter') { $this.bind('mouseenter', function(e) { e.preventdefault(); toggle($this, opts); }); } //bind event if (opts.bind == 'mouseover') { $this.bind('mouseover',function(e) { e.preventdefault(); toggle($this, opts); }); } //bind event if (opts.bind == 'click') { $this.bind('click', function(e) { e.preventdefault(); toggle($this, opts); }); } //bind event if (opts.bind == 'dblclick') { $this.bind('dblclick', function(e) { e.preventdefault(); toggle($this, opts); }); } //initialize panels //get id element id = $this.attr('id'); //if not using cookies, open defaults if (!usecookies(opts)) { //close if not defaulted open if (id != opts.defaultopen) { $this.addclass(opts.cssclose); opts.loadclose($this, opts); } else { //its default open, open $this.addclass(opts.cssopen); opts.loadopen($this, opts); opened = id; } } else { //can use cookies, use them //has cookie been set, overrides default open if (issetcookie(opts)) { if (incookie(id, opts) === false) { $this.addclass(opts.cssclose); opts.loadclose($this, opts); } else { $this.addclass(opts.cssopen); opts.loadopen($this, opts); opened = id; } } else { //a cookie hasn't been set open defaults if (id != opts.defaultopen) { $this.addclass(opts.cssclose); opts.loadclose($this, opts); } else { //its default open, open $this.addclass(opts.cssopen); opts.loadopen($this, opts); opened = id; } } } }); //now loop done, set cookie if (opened.length > 0 && usecookies(opts)) { setcookie(opened, opts); } else { //there none open, set cookie setcookie('', opts); } return obj; }; //load opts object function loadopts($this) { return $this.data('accordion-opts'); } //save opts object function saveopts($this, opts) { return $this.data('accordion-opts', opts); } //hides accordion panel function close(opts) { opened = $(document).find('.' + opts.cssopen); $.each(opened, function() { //give proper class linked element $(this).addclass(opts.cssclose).removeclass(opts.cssopen); opts.animateclose($(this), opts); }); } //opens accordion panel function open($this, opts) { close(opts); //give proper class linked element $this.removeclass(opts.cssclose).addclass(opts.cssopen); //open element opts.animateopen($this, opts); //do cookies if plugin available if (usecookies(opts)) { // split cookieopen string "," id = $this.attr('id'); setcookie(id, opts); } } //toggle accordion on event function toggle($this, opts) { // close open item if ($this.hasclass(opts.cssopen)) { close(opts); //do cookies if plugin available if (usecookies(opts)) { // split cookieopen string "," setcookie('', opts); } return false; } close(opts); //open closed element open($this, opts); return false; } //use cookies? function usecookies(opts) { //return false if cookie plugin not present or if cookie name not provided if (!$.cookie || opts.cookiename == '') { return false; } //we can use cookies return true; } //set cookie function setcookie(value, opts) { //can use cookie plugin if (!usecookies(opts)) { //no, quit here return false; } //cookie plugin available, lets set cookie $.cookie(opts.cookiename, value, opts.cookieoptions); } //check if accordion in cookie function incookie(value, opts) { //can use cookie plugin if (!usecookies(opts)) { return false; } //if not there don't need remove if (!issetcookie(opts)) { //quit here, don't have cookie return false; } //unescape cookie = unescape($.cookie(opts.cookiename)); //is value in cookie arrray if (cookie != value) { //no, quit here return false; } return true; } //check if cookie set function issetcookie(opts) { //can use cookie plugin if (!usecookies(opts)) { //no, quit here return false; } //is cookie set if ($.cookie(opts.cookiename) == null) { //no, quit here return false; } return true; } // settings $.fn.accordion.defaults = { cssclose: 'accordion-close', //class want assign closed accordion header cssopen: 'accordion-open', //class want assign opened accordion header cookiename: 'accordion', //name of cookie want set accordion cookieoptions: { //cookie options, see cookie plugin details path: '/', expires: 7, domain: '', secure: '' }, defaultopen: '', //id want opened default speed: 'slow', //speed of slide effect bind: 'click', //event bind to, supports click, dblclick, mouseover , mouseenter animateopen: function (elem, opts) { //replace standard slidedown custom function elem.next().stop(true, true).slidedown(opts.speed); }, animateclose: function (elem, opts) { //replace standard slideup custom function elem.next().stop(true, true).slideup(opts.speed); }, loadopen: function (elem, opts) { //replace default open state custom function elem.next().show(); }, loadclose: function (elem, opts) { //replace default close state custom function elem.next().hide(); } }; })(jquery);.accordion { margin: 0; padding:10px; border-top:#000000 2px solid; background: #ffffff; text-decoration:none; color: #000000; font-size:1em; position:relative; } .accordion-open { background:#cccccc; color: #ffffff; } .accordion-open span { display:block; position:absolute; right:3px; top:25%; padding:10px; } .accordion-open span { background:url('//cdn.shopify.com/s/files/1/0276/6855/t/14/assets/minus.png?4342') center center no-repeat; } .accordion-close span { display:block; position:absolute; right:3px; top:25%; background:url('//cdn.shopify.com/s/files/1/0276/6855/t/14/assets/plus.png?4342') center center no-repeat; padding:10px; } .faqpage div.container { padding:0; margin:0; } .faqpage div.container { max-width:100%; padding:5px 0; } .faqpage div.content { background:#cccccc; margin: 0; padding:10px; color: #000000; font-size:.9em; line-height:1.5em; } .faqpage div.content ul { padding:0; margin:0; padding:3px; } .faqpage div.content p { padding:0; margin:3px 0 10px; padding:3px; } .faqpage div.content ul li { list-style-position:inside; line-height:25px; } </style><div class="accordion" id="section1">category 1<span></span></div> <div class="container"> <div class="content"> <div class="accordion" id="section2"><strong>nested question 1</strong> <span></span></div> <div class="container"> <div class="content"> <p>answer question 1.</p> </div> </div> <div class="accordion" id="section3">nested question 2<span></span></div> <div class="container"> <div class="content"> <p>answer nested question 2.</p> </div> </div> <div class="accordion" id="section4">nested question 3<span></span></div> <div class="container"> <div class="content"> <p>answer nested question 3.</p> </div> </div> </div> </div> <div class="accordion" id="section1">category 2<span></span></div> <div class="container"> <div class="content"> <div class="accordion" id="section2"><strong>nested question 1</strong> <span></span></div> <div class="container"> <div class="content"> <p>answer question 1.</p> </div> </div> <div class="accordion" id="section3">nested question 2<span></span></div> <div class="container"> <div class="content"> <p>answer nested question 2.</p> </div> </div> <div class="accordion" id="section4">nested question 3<span></span></div> <div class="container"> <div class="content"> <p>answer nested question 3.</p> </div> </div> </div> </div> <div class="accordion" id="section1">category 3<span></span></div> <div class="container"> <div class="content"> <div class="accordion" id="section2"><strong>nested question 1</strong> <span></span></div> <div class="container"> <div class="content"> <p>answer question 1.</p> </div> </div> <div class="accordion" id="section3">nested question 2<span></span></div> <div class="container"> <div class="content"> <p>answer nested question 2.</p> </div> </div> <div class="accordion" id="section4">nested question 3<span></span></div> <div class="container"> <div class="content"> <p>answer nested question 3.</p> </div> </div> </div> </div>everything shows correctly, when click on nested accordion brings split second closes main accordion too.
please remember new of this. needs deleted or added , appreciated! thank you!
why accordions closing ? :
//hides accordion panel function close(opts) { opened = $(document).find('.' + opts.cssopen); $.each(opened, function() { //give proper class linked element $(this).addclass(opts.cssclose).removeclass(opts.cssopen); opts.animateclose($(this), opts); }); } //opens accordion panel function open($this, opts) { close(opts, true); // pass variable close function (that variable passed here) // see open function calls close function // close acordions before open selected. ....... } you can rewrite parts of code satisfy needs.
edit
also if want keep opened parent accordion of nested acordions have know if accordion inside accordion. (you need know id, class or identifies accordion -- in case each accordion has class .accordion). see below:
function close(opts) { opened = $(document).find('.' + opts.cssopen); $.each(opened, function() { //give proper class linked element if(opened.find('.accordion').length == 0 && aux){ // aux variable close dialog if // click open one. // accordion nested found -- don't close } else { $(this).addclass(opts.cssclose).removeclass(opts.cssopen); opts.animateclose($(this), opts); } }); } try , let me know if have errors! =)
edit 2
i've copied code , have make work now! when click open accordion pass id of clicked accordion close function. find next element of clicked accordion wich container. find in container if has element of clicked accordion. if yes nothing(don't close), else close it.
function open($this, opts) { close(opts, $this.attr('id')); ... function close(opts, id_open) { opened = $(document).find('.' + opts.cssopen); $.each(opened, function() { console.log(id_open, $(this).next().find('[id="' + id_open + '"]').length); if($(this).next().find('[id="' + id_open + '"]').length){ // have clicked in accordion, let's see if next element --(class container) // has element id="idofclickedaccordion" -- if has don't close } else { $(this).addclass(opts.cssclose).removeclass(opts.cssopen); opts.animateclose($(this), opts); } }); } also cool if change ids of each accordion:
<div class="accordion" id="section1_1">category 1<span></span></div> <div class="container"> <div class="content"> <div class="accordion" id="section1_2"><strong>nested question 1</strong> <span></span></div> <div class="container"> <div class="content"> <p>answer question 1.</p> </div> </div> <div class="accordion" id="section1_3">nested question 2<span></span></div> <div class="container"> <div class="content"> <p>answer nested question 2.</p> </div> </div> <div class="accordion" id="section1_4">nested question 3<span></span></div> <div class="container"> <div class="content"> <p>answer nested question 3.</p> </div> </div> </div> </div> <div class="accordion" id="section2_1">category 2<span></span></div> <div class="container"> <div class="content"> <div class="accordion" id="section2_2"><strong>nested question 1</strong> <span></span></div> <div class="container"> <div class="content"> <p>answer question 1.</p> </div> </div> <div class="accordion" id="section2_3">nested question 2<span></span></div> <div class="container"> <div class="content"> <p>answer nested question 2.</p> </div> </div> <div class="accordion" id="section2_4">nested question 3<span></span></div> <div class="container"> <div class="content"> <p>answer nested question 3.</p> </div> </div> </div> </div> 
Comments
Post a Comment