SharePoint 2013のアコーディオンメニューを作成する

Question

私はSharePointを初めて使用しています。クライアントの要件に応じて、私はSharePointでチームサイトを開発する必要があります。一部のページでは、以下のスクリーンショットに示すように、コンテンツをアコーディオンメニューで表示する必要があります。 Screenshot

これは、MicrosoftのSharePointヘルプで利用できます。以下は同じもののリンクです。私は彼らもこのサポートサイトにSharePointを使用していると考えています。誰もこのタイプのページで自分の経験を共有できますか？ SharePoint機能のみで可能か、カスタムHTMLページを作成する必要がありますか？いくつかの例は本当に感謝しています。前もって感謝します。

https://support.office.com/en-us/article/SharePoint-Online-help-83c1c11b-3d7c-4852-b597-46309e0892b3?ui=en-US&rs=en-US&ad=US

Answer 1

あなたのデータソースとしてのSharePoint APIを使用して、カスタム、それをビルドします。純粋にすぐに使えるものではないものは、一から作成する必要があります。それは丸い穴に四角いペグをはめ込むようなものです。あなたは四角いペグのコーナーを振り回しますが、丸い穴にはまったくフィットしません。

下記のコードはhereです。

はおそらくロードするのSharePointのすべてのを待つ必要があります、この1

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(YOURINITFUNCTIONHERE); 

グッドラックのようにあなたを助ける組み込み関数があります！

\t 
 
$(document).ready(function() { 
 
    function close_accordion_section() { 
 
     $('.accordion .accordion-section-title').removeClass('active'); 
 
     $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); 
 
    } 
 
    
 
    $('.accordion-section-title').click(function(e) { 
 
     // Grab current anchor value 
 
     var currentAttrValue = $(this).attr('href'); 
 
    
 
     if($(e.target).is('.active')) { 
 
      close_accordion_section(); 
 
     }else { 
 
      close_accordion_section(); 
 
    
 
      // Add active class to section title 
 
      $(this).addClass('active'); 
 
      // Open up the hidden content panel 
 
      $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
 
     } 
 
    
 
     e.preventDefault(); 
 
    }); 
 
    
 
});

/*----- Accordion -----*/ 
 
.accordion, .accordion * { 
 
    -webkit-box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
} 
 
    
 
.accordion { 
 
    overflow:hidden; 
 
    box-shadow:0px 1px 3px rgba(0,0,0,0.25); 
 
    border-radius:3px; 
 
    background:#f7f7f7; 
 
} 
 
    
 
/*----- Section Titles -----*/ 
 
.accordion-section-title { 
 
    width:100%; 
 
    padding:15px; 
 
    display:inline-block; 
 
    border-bottom:1px solid #1a1a1a; 
 
    background:#333; 
 
    transition:all linear 0.15s; 
 
    /* Type */ 
 
    font-size:1.200em; 
 
    text-shadow:0px 1px 0px #1a1a1a; 
 
    color:#fff; 
 
} 
 
    
 
.accordion-section-title.active, .accordion-section-title:hover { 
 
    background:#4c4c4c; 
 
    /* Type */ 
 
    text-decoration:none; 
 
} 
 
    
 
.accordion-section:last-child .accordion-section-title { 
 
    border-bottom:none; 
 
} 
 
    
 
/*----- Section Content -----*/ 
 
.accordion-section-content { 
 
    padding:15px; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <div class="accordion-section"> 
 
     <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a> 
 
      
 
     <div id="accordion-1" class="accordion-section-content"> 
 
      <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p> 
 
     </div><!--end .accordion-section-content--> 
 
    </div><!--end .accordion-section--> 
 
</div><!--end .accordion-->