JS手风琴效果

<div id="accordion">
            <ul>
                <li>
                    <div class="accordionTitle">1div>
                    <div class="accordionMain">222div>
                li>
                <li>
                    <div class="accordionTitle">2div>
                    <div class="accordionMain accordionActive">222qdiv>
                li>
                <li>
                    <div class="accordionTitle">3div>
                    <div class="accordionMain">222dddiv>
                li>
                <li>
                    <div class="accordionTitle">3div>
                li>
            ul>
        div>

ul{list-style-type: none;padding: 0px;margin: 0px;}
        #accordion ul li{float:left;display: inline;}
        .accordionTitle{width:20px;height:100px;border:1px solid #000000;background-color:#FFCCFF;writing-mode:lr-tb;margin:1 auto;line-height:24px;float:left;}
        .accordionMain{margin-left: 22px;display:none;width:100px;height:100px;background-color: blue;border:1px solid #000000;}
        .accordionActive{display:block;}