Accordion Menu Checkbox ile Çoklu kategori Seçimi

NOT: Kodu ASP Kod Blogunun İçersine yapıştırıp Çalıştırabilirsiniz....
NOT:Panel Kullanımınına dikkat edilmelidir aksi durumda çalışmaz 
paneli kod içersinde kullanıldığı gibi kullanmak gerekir...



<asp:Content ID="Content1" ContentPlaceHolderID="mainhead" Runat="Server">
    <style type="text/css">


.cbkategori:hover{
    background-color:#b81d22;
    color:white;

}
.cbcerceve{
    border:1px solid;
    border-color:silver;
    border-radius:5px;
    padding:5px;
}
/**/
 
       
html {
    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 100%;
}

.mn-acc-app {
    max-width: 240px;
    margin: auto;
}

h1.demo-title {
    text-align: center;
}
/***************/

.mn-accordion .accordion-item {
  background-color: #ffffff;
  border-bottom: 1px solid #d9e5e8;
}

.mn-accordion .accordion-item .accordion-heading {
  position: relative;
  cursor: pointer;
  padding: 10px;
}

.mn-accordion .accordion-item .accordion-heading .icon {
  color: #4a6e78;
  position: absolute;
  top:50%;
  right: 2%;
  margin-top: -11px;
}

.mn-accordion .accordion-item .accordion-heading .icon i {
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: solid #4a6e78;
  border-width: 0 5px 5px 0;
  display: inline-block;
  padding: 3px;
}

.mn-accordion .accordion-item .accordion-heading .icon i.right {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.mn-accordion .accordion-item .accordion-heading h3 {
  color: #4a6e78;
  margin: 0;
  font-weight: normal;
  font-size: 1.2em;
}

.mn-accordion .accordion-item .accordion-content {
  overflow: hidden;
  height: 0;
  color: #333;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: initial;
}

.mn-accordion .accordion-item .accordion-content p:first-child {
  margin-top: 0;
}

.mn-accordion .accordion-item .accordion-content p:last-child {
  margin-bottom: 0;
}

.mn-accordion .accordion-item .accordion-content > * {
  
  background-color:#fff;
  color:000;
  list-style:none;
  padding-left:10px;
}

.mn-accordion .accordion-item.state-open .accordion-heading {
  border-bottom: 1px solid #d9e5e8;
}

.mn-accordion .accordion-item.state-open .accordion-heading .icon i {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*benyaptım*/
.categoriall{
 padding:10px;
 background-color:#b81d22;
 color:#FFF;
}
.accordion-content .bgcss:hover{
 background-color:#b81d22;
 color:#FFF;
 padding-top:3px;
    padding-left:15px;
    margin-top:-1px;
 
 }
    </style>
    <script type="text/javascript">
        (function (global, factory) {
            if (typeof define === "function" && define.amd) {
                define(["exports"], factory);
            } else if (typeof exports !== "undefined") {
                factory(exports);
            } else {
                var mod = {
                    exports: {}
                };
                factory(mod.exports);
                global.index = mod.exports;
            }
        })(this, function (exports) {
            /**
             * Created by maykinayki on 8/31/17.
             */

            "use strict";

            Object.defineProperty(exports, "__esModule", {
                value: true
            });

            var _extends = Object.assign || function (target) {
                for (var i = 1; i < arguments.length; i++) {
                    var source = arguments[i];

                    for (var key in source) {
                        if (Object.prototype.hasOwnProperty.call(source, key)) {
                            target[key] = source[key];
                        }
                    }
                }

                return target;
            };

            function _classCallCheck(instance, Constructor) {
                if (!(instance instanceof Constructor)) {
                    throw new TypeError("Cannot call a class as a function");
                }
            }

            var _createClass = function () {
                function defineProperties(target, props) {
                    for (var i = 0; i < props.length; i++) {
                        var descriptor = props[i];
                        descriptor.enumerable = descriptor.enumerable || false;
                        descriptor.configurable = true;
                        if ("value" in descriptor) descriptor.writable = true;
                        Object.defineProperty(target, descriptor.key, descriptor);
                    }
                }

                return function (Constructor, protoProps, staticProps) {
                    if (protoProps) defineProperties(Constructor.prototype, protoProps);
                    if (staticProps) defineProperties(Constructor, staticProps);
                    return Constructor;
                };
            }();

            var global = typeof window !== "undefined" ? window : undefined;
            var document = global.document;

            var Accordion = function () {
                function Accordion(element) {
                    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

                    _classCallCheck(this, Accordion);

                    var self = this;

                    self.defaultOptions = {
                        eventName: "click", //supports all HTML DOM Events (e.g. click, dblclick, mouseover etc.)
                        eventDelay: 0, // enable event delay untill given milliseconds, usefull if eventName is mouseover
                        collapsible: true, // enable all accordion item can be closed at once
                        multiple: false, // enable multiple accordion item open at once
                        defaultOpenedIndexes: 0, // -1 for close all as default, array of indexes accepted if multiple option is true

                        //slide functions with jQuery. If you don't include jQuery in your website please override these functions
                        slideDuration: 200,
                        slideDownFn: function slideDownFn(el, slideDuration) {
                            el.style.WebkitTransitionDuration = slideDuration + "ms";
                            el.style.transitionDuration = slideDuration + "ms";

                            el.style.height = "auto";
                            var height = el.scrollHeight;
                            el.style.height = "0";
                            global.setTimeout(function () {
                                el.style.height = height + "px";
                            }, 0);
                        },
                        slideUpFn: function slideUpFn(el, slideDuration) {
                            el.style.WebkitTransitionDuration = slideDuration + "ms";
                            el.style.transitionDuration = slideDuration + "ms";
                            global.setTimeout(function () {
                                el.style.height = "0";
                            }, 0);
                        }
                    };
                    self.options = _extends({}, self.defaultOptions, options);
                    self.accordion = element;
                    self.accordionItemsLength = self.accordion.childElementCount;

                    if (document.readyState === "complete") {
                        self.init();
                    } else {
                        document.addEventListener('readystatechange', function (event) {
                            if (event.target.readyState === "complete") {
                                self.init();
                            }
                        }, false);
                    }
                }

                _createClass(Accordion, [{
                    key: "init",
                    value: function init() {
                        var self = this;

                        var openedIndexes = self.options.defaultOpenedIndexes instanceof Array ? self.options.defaultOpenedIndexes : [self.options.defaultOpenedIndexes];

                        var _loop = function _loop(i) {
                            var accordionItem = self.accordion.children[i];
                            var accordionItemHeading = accordionItem.getElementsByClassName("accordion-heading")[0];

                            if (accordionItemHeading) {
                                var eventFn = function eventFn(e) {
                                    self.handleAccordionItemHeadingEvent(e, accordionItem, i);
                                };
                                if (accordionItemHeading.eventListenerAttached !== true) {
                                    accordionItemHeading.addEventListener(self.options.eventName, eventFn, false);
                                }
                                accordionItemHeading.eventListenerAttached = true;
                            }

                            if (openedIndexes.indexOf(i) > -1) {
                                self.openAccordionItem(accordionItem, i);
                            } else {
                                self.closeAccordionItem(accordionItem);
                            }
                        };

                        for (var i = 0; i < self.accordionItemsLength; i++) {
                            _loop(i);
                        }
                    }
                }, {
                    key: "openAccordionItem",
                    value: function openAccordionItem(item, itemIndex) {
                        var self = this;

                        item.isOpened = true;
                        item.classList.add("state-open");

                        var accordionItemContent = item.getElementsByClassName("accordion-content")[0];

                        if (!self.options.multiple) {
                            self.closeRestAccordionItems(itemIndex);
                        }

                        self.options.slideDownFn(accordionItemContent, self.options.slideDuration);
                    }
                }, {
                    key: "openAccordionItemByIndex",
                    value: function openAccordionItemByIndex(itemIndex) {
                        var self = this;

                        var accordionItem = self.accordion.children[itemIndex];
                        self.openAccordionItem(accordionItem, itemIndex);
                    }
                }, {
                    key: "closeAccordionItem",
                    value: function closeAccordionItem(item) {
                        var self = this;

                        var accordionItemContent = item.getElementsByClassName("accordion-content")[0];
                        item.isOpened = false;
                        item.classList.remove("state-open");

                        self.options.slideUpFn(accordionItemContent, self.options.slideDuration);
                    }
                }, {
                    key: "closeAccordionItemByIndex",
                    value: function closeAccordionItemByIndex(itemIndex) {
                        var self = this;

                        var accordionItem = self.accordion.children[itemIndex];
                        self.closeAccordionItem(accordionItem);
                    }
                }, {
                    key: "closeRestAccordionItems",
                    value: function closeRestAccordionItems() {
                        var self = this;

                        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
                            args[_key] = arguments[_key];
                        }

                        for (var i = 0; i < self.accordionItemsLength; i++) {
                            if (args.indexOf(i) === -1) {
                                var _accordionItem = self.accordion.children[i];
                                self.closeAccordionItem(_accordionItem);
                            }
                        }
                    }
                }, {
                    key: "handleAccordionItemHeadingEvent",
                    value: function handleAccordionItemHeadingEvent(e, item, itemIndex) {
                        var self = this;
                        self.eventTimeout && window.clearTimeout(self.eventTimeout);
                        self.eventTimeout = window.setTimeout(function () {
                            if (item.isOpened && !self.options.multiple) {
                                if (self.options.collapsible) {
                                    self.closeAccordionItem(item);
                                }
                                self.closeRestAccordionItems(itemIndex);
                            } else if (item.isOpened && self.options.multiple) {
                                self.closeAccordionItem(item);
                            } else {
                                self.openAccordionItem(item, itemIndex);
                            }
                        }, self.options.eventDelay);
                    }
                }]);

                return Accordion;
            }();

            global.Accordion = Accordion;

            exports.default = Accordion;
        });

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <asp:Panel ID="Panel1" runat="server">
  <div class="mn-acc-app cbcerceve">
          <asp:ListBox Width="100%" ID="ListBox1" runat="server"></asp:ListBox>
        
    <div class="categoriall"><p><asp:Button ID="Button2" Width="100%" CssClass="btn btn-success" runat="server" Text="Çoklu Arama" OnClick="Button2_Click" /></p><p><asp:Button ID="Button3" Width="100%" CssClass="btn btn-success" runat="server" Text="Temizle" OnClick="Button3_Click" /></p>Tüm Kategoriler
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
      </div>
    <div class="mn-accordion" id="accordion-2">
     
     <!--Accordion item-->
        <div class="accordion-item">
            <div class="accordion-heading">
                <h3>BOYA</h3>
                <div class="icon">
                    <i class="arrow right"></i>
                </div>
            </div>
            <div class="accordion-content">
               
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox1" runat="server" Text="DYO"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox2" runat="server" Text="CASATİ"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox3" runat="server" Text="KARDELEN"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox4" runat="server" Text="REDİKS"/></li>
                       
            </div>
        </div>
        <!--Accordion item-->
     <!--Accordion item-->
        <div class="accordion-item">
            <div class="accordion-heading">
                <h3>HIRDAVAT</h3>
                <div class="icon">
                    <i class="arrow right"></i>
                </div>
            </div>
            <div class="accordion-content">
                
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox5" runat="server" Text="MERDİVEN"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox6" runat="server" Text="ELDİVEN"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox7" runat="server" Text="MAKİNE"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox8" runat="server" Text="SİLİKON"/></li>
                   
            </div>
        </div>
        <!--Accordion item-->

        <!--Accordion item-->
        <div class="accordion-item">
            <div class="accordion-heading">
                <h3>YALITIM</h3>
                <div class="icon">
                    <i class="arrow right"></i>
                </div>
            </div>
            <div class="accordion-content">
               
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox9" runat="server" Text="EPS"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox10" runat="server" Text="XPS"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox11" runat="server" Text="TAŞYÜNÜ"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox12" runat="server" Text="DÜBEL"/></li>
                <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox13" runat="server" Text="FİLE"/></li>
                      
            </div>
        </div>
        <!--Accordion item-->

        <!--Accordion item-->
        <div class="accordion-item">
            <div class="accordion-heading">
                <h3>YAPI KİMYASAL</h3>
                <div class="icon">
                    <i class="arrow right"></i>
                </div>
            </div>
            <div class="accordion-content">
                
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox14" runat="server" Text="YAPIŞTIRICI"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox15" runat="server" Text="DERZ"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox16" runat="server" Text="AKRİLİK"/></li>
                 
            </div>
        </div>
        <!--Accordion item-->

        <!--Accordion item-->
        <div class="accordion-item">
            <div class="accordion-heading">
                <h3>ÇİVİ</h3>
                <div class="icon">
                    <i class="arrow right"></i>
                </div>
            </div>
            <div class="accordion-content">
                
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox17" runat="server" Text="Merdiven"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox18" runat="server" Text="Hırdavat"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox19" runat="server" Text="Eldiven"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox20" runat="server" Text="Boya"/></li>
            
            </div>
        </div>
        <!--Accordion item-->

        <!--Accordion item-->
        <div class="accordion-item">
            <div class="accordion-heading">
                <h3>DİĞER</h3>
                <div class="icon">
                    <i class="arrow right"></i>
                </div>
            </div>
            <div class="accordion-content">
                
                 <%--<li class="bgcss"><asp:CheckBox CssClass="form-control" ID="CheckBox21" runat="server" Text="Merdiven"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox22" runat="server" Text="Hırdavat"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox23" runat="server" Text="Eldiven"/></li>
                 <li class="bgcss"><asp:CheckBox CssClass="cbkategori" ID="CheckBox24" runat="server" Text="Boya"/></li>--%>
            
            </div>
        </div>
        <!--Accordion item-->

    </div>

</div>
 </asp:Panel>
<script src="js/mn-accordion.js"></script>
<script>
    (function () {


        var accordion_2 = new Accordion(document.getElementById("accordion-2"), {
            multiple: true,
            defaultOpenedIndexes: [1, 2]
        });
    })();
</script>





</asp:Content>