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

하는 것은 사용자 정의하여 데이터 소스와 셰어 API를 사용하여 구축 할 수 있습니다. 순전히 표준품이 아닌 것은 처음부터 만들어야합니다. 둥근 구멍에 사각 못을 끼워 넣는 것과 같습니다. 당신은 사각 못의 모퉁이에서 멀리 whittle하지만 그것은 둥근 구멍에 정확히 맞지 않을거야.

아래 코드는 here입니다.

당신은 아마로드 할 셰어의 모든 대기해야합니다,이

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

goodluck는 같은 도움이 내장 함수가 있습니다!

\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-->