JavaScript + Ajax 実践サンプル集 - jQueryのhoverAccordionプラグインを利用したアコーディオン

jQueryのhoverAccordionプラグインを利用したアコーディオン

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのhoverAccordion()プラグインを利用してホーバー型のアコーディオンを表示します。マウスをタブ上に移動すると自動的にコンテンツが表示されます。

このサンプルを編集して試してみる ←サンプルが背後に隠れて見えないときは左をクリック！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Hover Accordion </title>
  <link href="jQuery/hoverAccordion/hoverAccordion.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/hoverAccordion/jquery.hoveraccordion.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $('#accordion').hoverAccordion({
        activateitem: '1',
        speed: 'fast'
      });
      $('#accordion').children('li:first').addClass('firstitem');
      $('#accordion').children('li:last').addClass('lastitem');
    });    
  </script>
</head>
<body>

<div style="width: 300px; height: 300px; background-color: #FFFFFF; padding: 50px;">
    <ul id="accordion">
      <li><a href="#">Item 1</a>
        <ul>
          <li>Content #1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
            voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
        </ul>
      </li>
      <li><a href="#">Item 2</a>
        <ul>
          <li>Content #2 - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
            kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero
            eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
            takimata sanctus est Lorem ipsum dolor sit amet.</li>
        </ul>
      </li>
      <li><a href="#">Item 3</a>
        <ul>
          <li>Content #3 - Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
            aliquyam erat, sed diam voluptua.</li>
        </ul>
      </li>
      <li><a href="#">Item 4</a>
        <ul>
          <li>Content #4 - Vet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Vet clita
            kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero
            eos et accusam et justo duo dolores et ea rebum.</li>
        </ul>
      </li>
    </ul>
  </div>
  
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/**
 * HoverAccordion - jQuery plugin for intuitively opening accordions and menus
 * http://berndmatzner.de/jquery/hoveraccordion/
 * Copyright (c) 2008 Bernd Matzner
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Requires jQuery 1.2.1 or higher
 * Version: 0.5.0
 *
 * Usage:
 * $('#YourUnorderedListID').hoverAccordion();
 * or
 * $('.YourUnorderedListClass').hoverAccordion({
 *  speed: 'slow',
 *  activateitem: '1',
 *  active: 'current',
 *  header: 'title',
 *  hover: 'highlight',
 *  opened: 'arrowdown',
 *  closed: 'arrowup'
 *  keepheight: 'true'
 * });
 */
(function($){
    $.fn.hoverAccordion = function(options){
        // Setup options
        options = jQuery.extend({
            speed: 'fast', // Speed at which the subitems open up - valid options are: slow, normal, fast
            activateitem: 'true', // 'true': Automatically activate items with links corresponding to the current page, '2': Activate item #2
            active: 'active', // Class name of the initially active element
            header: 'header', // Class name for header items
            hover: 'hover', // Class name for hover effect
            opened: 'opened', // Class name for open header items
            closed: 'closed', // Class name for closed header items
            keepheight: 'true' // 'true': Set the height of each accordion item to the size of the largest one, 'false': Leave height as is
        }, options);
        
        // Current hover status
        var thislist = this;
        
        // Current URL
        var thisurl = window.location.href;
        
        // Interval for detecting intended element activation
        var i = 0;
        
        // Change display status of subitems when hovering
        function doHover(obj){
            if ($(obj).html() == undefined) 
                obj = this;
            
            // Change only one display status at a time
            if (!thislist.is(':animated')) {
                var newelem = $(obj).parent().children('ul');
                var oldelem = $(obj).parent().parent().children('li').children('ul:visible');
                if (options.keepheight == 'true') {
                    thisheight = maxheight;
                }
                else {
                    thisheight = newelem.height();
                }
                
                // Change display status if not already open
                if (!newelem.is(':visible')) {
                    newelem.children().hide();
                    newelem.animate({
                        height: thisheight
                    }, {
                        step: function(n, fx){
                            newelem.height(thisheight - n);
                        },
                        duration: options.speed
                    }).children().show();
                    
                    oldelem.animate({
                        height: 'hide'
                    }, {
                        step: function(n, fx){
                            newelem.height(thisheight - n);
                        },
                        duration: options.speed
                    }).children().hide();
                    
                    // Switch classes for headers
                    oldelem.parent().children('a').addClass(options.closed).removeClass(options.opened);
                    newelem.parent().children('a').addClass(options.opened).removeClass(options.closed);
                }
            }
        };
        
        var itemNo = 0;
        var maxheight = 0;
        
        // Setup initial state and hover events
        $(this).children('li').each(function(){
            var thisitem = $(this);
            
            itemNo++;
            
            // Set current link to current URL to 'active' and disable anchor links
            var thislink = thisitem.children('a');
            
            if (thislink.length > 0) {
                // Hover effect for all links
                thislink.hover(function(){
                    $(this).addClass(options.hover);
                }, function(){
                    $(this).removeClass(options.hover);
                });
                
                var thishref = thislink.attr('href');
                
                if (thishref == '#') {
                    // Add a click event if the header does not contain a link
                    thislink.click(function(){
                        doHover(this);
                        this.blur();
                        return false;
                    });
                }
                else 
                    if (options.activateitem == 'true' && thisurl.indexOf(thishref) > 0 && thisurl.length - thisurl.lastIndexOf(thishref) == thishref.length) {
                        thislink.parent().addClass(options.active);
                    }
            }
            
            var thischild = thisitem.children('ul');
            
            // Initialize subitems
            if (thischild.length > 0) {
                if (maxheight < thischild.height()) 
                    maxheight = thischild.height();
                
                // Change appearance of the header element of the active item
                thischild.children('li.' + options.active).parent().parent().children('a').addClass(options.header);
                
                // Bind hover events to all subitems
                thislink.hover(function(){
                    var t = this;
                    i = setInterval(function(){
                        doHover(t);
                        clearInterval(i);
                    }, 400);
                }, function(){
                    clearInterval(i);
                });
                
                
                // Set current link to current URL to 'active'
                if (options.activateitem == 'true') {
                    thischild.children('li').each(function(){
                        var m = $(this).children('a').attr('href');
                        if (m) {
                            if (thisurl.indexOf(m) > 0 && thisurl.length - thisurl.lastIndexOf(m) == m.length) {
                                $(this).addClass(options.active).parent().parent().children('a').addClass(options.opened);
                            }
                        }
                    });
                }
                else 
                    if (parseInt(options.activateitem) == itemNo) {
                        thisitem.addClass(options.active).children('a').addClass(options.opened);
                    }
            }
            
            // Close all subitems except for those with active items
            thischild.not($(this).parent().children('li.' + options.active).children('ul')).not(thischild.children('li.' + options.active).parent()).hide().parent().children('a').addClass(options.closed);
        });
        
        return this;
    };
})(jQuery);

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
/* General Styles */
*{
margin:0;
padding:0;
border:0px none #FFFFFF;
}
* html ul ul li{
margin-bottom:-1px;
}
* html ul ul li a,* html ul li a{
height:100%;
}
a{
color:#FFFFFF;
text-decoration:underline;
}
body{
margin:20px;
padding:0 0 0 0;
background:#808080 repeat-y center;
color:#F0F0F0;
font-family:'Lucida Grande','Segoe UI',Arial,Helvetica,sans-serif;
font-size:85%;
line-height:140%;
}
code{
padding:0.5em;
border-top:1px solid #666666;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #666666;
margin:0.5em 0 0.5em 0;
display:block;
}
h1{
margin:1em 0 0.5em 0;
display:block;
font-weight:normal;
}
h2{
border-top:1px solid #F0F0F0;
padding-top:0.5em;
margin:1em 0 1em 0;
display:block;
font-weight:normal;
}
#content{
margin:30px;
width:400px;
border-top:1px solid #999999;
border-right:1px solid #666666;
border-bottom:1px solid #666666;
border-left:1px solid #999999;
padding:20px;
}

/* Styles for AccordionMenu */

#accordionMenu{
margin:0;
padding:0;
width:200px;
list-style-type:none;
line-height:120%;
}
#accordionMenu .closed{
background-image:url(ha-down.gif);
}
#accordionMenu .closed,#accordionMenu .opened{
padding-right:10px;
background-position:98% 50%;
background-repeat:no-repeat;
}
#accordionMenu .header{
background-color:#7B7B7B;
}
#accordionMenu .opened{
background-image:url(ha-up.gif);
}
#accordionMenu a{
display:block;
font-weight:bold;
text-decoration:none;
}
#accordionMenu a.hover{
border-top:1px solid #5F5F5F;
border-bottom:1px solid #7B7B7B;
background-color:#7B7B7B;
color:#FFFFFF;
}
#accordionMenu ul{
overflow: hidden;
margin:0;
padding:0;
}
#accordionMenu li{
margin:0;
padding:0;
list-style-type:none;
background-color:#848484;
color:#FFFFFF;
}
#accordionMenu li a{
padding:2px 10px 2px 4px;
border-top:1px solid #9A9A9A;
border-left:1px solid #9A9A9A;
border-right:1px solid #696969;
border-bottom:1px solid #757575;
background-color:#848484;
color:#FFFFFF;
}
#accordionMenu li.active a,#accordionMenu li li.active a{
border-top:1px solid #5F5F5F;
border-bottom:1px solid #7B7B7B;
border-left:1px solid #757575;
border-right:1px solid #9A9A9A;
background-color:#404040;
color:#FFFFFF;
}
#accordionMenu li.active li a,#accordionMenu li li a{
padding:2px 4px 2px 8px;
border-top:1px solid #696969;
border-left:1px solid #696969;
border-right:1px solid #8A8A8A;
border-bottom:1px solid #7B7B7B;
background-color:#757575;
color:#FFFFFF;
}


/* Styles for Accordion */
#accordion{
margin:0;
padding:0;
width:300px;
list-style-type:none;
background-color:#FFFFFF;
color:#000000;
line-height:120%;
height:300px;
}
#accordion a{
display:block;
font-weight:normal;
text-decoration:none;
}
#accordion ul{
overflow: hidden;
margin:0;
padding:0;
}
#accordion li{
margin:0;
padding:0;
list-style-type:none;
}
#accordion li a{
width:285px;
padding:5px 0 0 15px;
display:block;
color:#000000;
background-image:url(ha-header.jpg);
height:25px;
}
#accordion li a.closed{
color:#000000 !important;
background-image:url(ha-header.jpg) !important;
}
#accordion li.firstitem a.closed{
color:#000000 !important;
background-image:url(ha-header-first.jpg) !important;
}
#accordion li.lastitem a.closed{
color:#000000 !important;
background-image:url(ha-header-last.jpg) !important;
}
#accordion li li{
border-left:1px solid #E5E5E5;
border-right:1px solid #E5E5E5;
padding:0 15px 0 15px;
height:175px;
}
#accordion li a.opened{
background-image:url(ha-header-active.jpg);
color:#FFFFFF;
}
#accordion li.firstitem a.opened{
background-image:url(ha-header-first-active.jpg);
color:#FFFFFF;
}
#accordion li.lastitem li{
margin-bottom:-4px;
}
#accordion li.lastitem ul{
background-image:url(ha-footer.jpg);
background-repeat:no-repeat;
background-position:bottom;
padding-bottom:4px;
}

このサンプルを編集して試してみる!

    $(function() {   
      $('#accordion').hoverAccordion({   
        activateitem: '1',   
        speed: 'fast'  
      });   
      $('#accordion').children('li:first').addClass('firstitem');   
      $('#accordion').children('li:last').addClass('lastitem');   
    });  

  <div style="width: 300px; height: 300px; background-color: #FFFFFF; padding: 50px;">
    <ul id="accordion">
      <li><a href="#">Item 1</a>
        <ul>
          <li>Content #1 </li>
        </ul>
      </li>

    </ul>
  </div>

JavaScript + Ajax 実践サンプル集 (1127本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

jQueryのhoverAccordionプラグインを利用したアコーディオン

JavaScript + Ajax 実践サンプル集 (1127本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

jQueryのhoverAccordionプラグインを利用したアコーディオン

JavaScript + Ajax 実践サンプル集 (1127本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...