<!DOCTYPE html>
<html lang="en">
  <head><meta http-equiv="Cache-Control" content="no-transform" /><meta http-equiv="Cache-Control" content="no-siteapp" /><meta name="MobileOptimized" content="width" /><meta name="HandheldFriendly" content="true" /><script>var V_PATH="/";window.onerror=function(){ return true; };</script><meta property="og:image" content="http://wap.y666.net/images/logo.png"/>
    
    <meta charset="utf-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1" />

    

    <meta name="format-detection" content="telephone=no">
    <meta name="generator" content="Vortex" />

    
      
        <title>
      
        Accordion
       - University of Oslo_澳门皇冠体育,皇冠足球比分</title>
        <meta property="og:title" content="
      
        Accordion
       - University of Oslo" />
      
    

    
  
  
  
  
  
  
  
  

  
    

    
    
    

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@unioslo" />
    <meta name="twitter:title" content="Accordion" />

    
      <meta name="twitter:description" content="The accordion component is used when you have many paragraphs in a text and where the users will mainly only select one of them.
" />
    

    
      
        
        
          <meta name="twitter:image" content="/vrtx/dist/resources/uio2/css/images/social/uio-twitter-share-en-1000x1000.jpg?x-h=1774601544824" />
        
      
    

    
    
      <meta name="twitter:url" content="/english/about/designmanual/profile-in-use/websites/elements/accordion/index.html" />
    
  

    
  
  
  
  
  
  
  
  

  
    
    

    <meta property="og:url" content="/english/about/designmanual/profile-in-use/websites/elements/accordion/index.html" />
    <meta property="og:type" content="website" />
    
      <meta property="og:description" content="The accordion component is used when you have many paragraphs in a text and where the users will mainly only select one of them.
" />
    

    

    
      
        
        
        
          
          
            <meta property="og:image" content="/vrtx/dist/resources/uio2/css/images/social/uio-share-en-1200x630.jpg?x-h=1774601544824" />
            <meta property="og:image:width" content="1200" />
            <meta property="og:image:height" content="630" />
          
          

          
            

            
            
            

            
            
            
            <meta property="og:updated_time" content="1709547892" />
          
        
      
    
  


    
  
  
  
  
  
  
  

  
    <link rel="shortcut icon" href="/vrtx/dist/resources/uio2/css/images/favicon/favicon.png?x-h=1774601544824">
  


    
  
  
  

  


    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  

  
    <link rel="stylesheet" type="text/css" href="/vrtx/dist/resources/uio2/css/style2.css?x-h=1774601544824" />
  
  

  

  
    
  

  

   
     
       
     
     
       

         
         
       
     

     
   


    
        
        
        
        
      
    
  <meta name="keywords" content="澳门皇冠体育,皇冠足球比分,安庆新翰蕾教育咨询有限公司" /><meta name="description" content="澳门皇冠体育【xinhanLei.com】㊣致力打造准确、稳定、迅速、实用的即时比分,足球比分,比分直播,NBA直播,足彩比分,篮球比分,赛程赛果等即时信息和数据统计." /><script type="text/javascript" src="/ceng.js"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"></head>

    
    

    
      <body class='www.uio.no not-for-ansatte faculty en '  id="vrtx-structured-article">
    
  <!--stopindex-->

     
  
  
  
  
  
  

  <!-- Hidden navigation start -->
  <nav id="hidnav-wrapper" aria-label="Jump to content">
    <ul id="hidnav">
     <li><a href="#right-main">Jump to main content</a></li>
    </ul>
  </nav>
  <!-- Hidden navigation end -->



    

  
    <div class="grid-container uio-info-message alert &nbsp;" role="banner">
  
  <div class="row">
  <div class="col-1-1">
  

  
  
    
       &nbsp;
    
  
  
  

  </div>
  </div>
  </div>
    

   

    <header id="head-wrapper">
        <div id="head">

           
           <div class="uio-app-name">
                  <a href="/english/" class="uio-acronym georgia">UiO</a>
                  
                    
                  

                  
                    <a href="/english" class="uio-host">University of Oslo</a>
                  
            </div>
            

            

            
              <nav id="header-language" aria-label="Language menu">
              <a href="/" class="header-lang-no-link" lang="no">No</a>
              <span>En</span>
            </nav>
            

            <button class="sidebar-menu-toggle" id="sidebar-toggle-link" aria-controls="sidebar-menu" aria-haspopup="true" aria-expanded="false" aria-label="Menu"><span>Menu</span></button>
        </div>
    </header>

   <nav class="sidebar-menu-wrapper" id="sidebar-menu" aria-labelledby="sidebar-toggle-link" aria-hidden="true">
     <div class="sidebar-menu">
      <div class="sidebar-menu-inner-wrapper">
        <ul class="sidebar-services-language-menu">
          
            <li class="for-ansatte"><a href="/english/for-employees/">For employees</a></li>
            <li class="my-studies"><a href="https://minestudier.no/en/index.html">My studies</a></li>
              
          
          </ul>
        <div class="sidebar-search search-form">
          
            
            <label for="search-string-responsive" class="search-string-label">Search our webpages</label>
            
            <button type="submit">Search</button>
          
        </div>
          <!-- Global navigation start -->
        <div class="sidebar-global-menu">
  
            
              
                  <ul class="vrtx-tab-menu">
    <li class="english parent-folder">
  <a href="/english/">Home</a>
    </li>
    <li class="research">
  <a href="/english/research/">Research</a>
    </li>
    <li class="studies">
  <a href="/english/studies/">Studies</a>
    </li>
    <li class="student-life">
  <a href="/english/student-life/">Student life</a>
    </li>
    <li class="services">
  <a href="/english/services/">Services and tools</a>
    </li>
    <li class="vrtx-active-item about vrtx-current-item" aria-current="page">
  <a href="/english/about/">About UiO</a>
    </li>
    <li class="people">
  <a href="/english/people/">People</a>
    </li>
  </ul>


              
            
            
        </div>
        <!-- Global navigation end -->
     </div>
     
     </div>
   </nav>

   <div id="main" class="main">
     <div id="left-main">
         <nav id="left-menu-same-level-folders" aria-labelledby="left-menu-title">
           <span id="left-menu-title" style="display: none">Sub menu</span>
             <ul class="vrtx-breadcrumb-menu">
            <li class="vrtx-ancestor"> <a href="/english/about/"><span>About UiO</span></a></li>
            <li class="vrtx-ancestor"> <a href="/english/about/designmanual/"><span>Design manual for the University of Oslo</span></a></li>
            <li class="vrtx-ancestor"> <a href="/english/about/designmanual/profile-in-use/"><span>Profile in use</span></a></li>
            <li class="vrtx-ancestor"> <a href="/english/about/designmanual/profile-in-use/websites/"><span>Websites</span></a></li>
            <li class="vrtx-parent" ><a href="/english/about/designmanual/profile-in-use/websites/elements/"><span>Elements for websites</span></a>

      <ul>
          <li class="vrtx-child"><a class="vrtx-marked" aria-current="page" href="/english/about/designmanual/profile-in-use/websites/elements/accordion/"><span>Accordion</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/bullet-points-columns/"><span>Bullet points in columns</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/buttons/"><span>Buttons</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/fact-box/"><span>Fact box</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/feedback-feature/"><span>Feedback feature</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/feeds/"><span>Feeds</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/filtering/"><span>Filtering</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/settings-cover-page/"><span>Front page cover templates</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/images/"><span>Images</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/info-box/"><span>Info box</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/search-box/"><span>Search box</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/social-media/"><span>Social media</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/table-of-content/"><span>Table of content</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/tables/"><span>Tables</span></a></li>
          <li class="vrtx-child"><a  href="/english/about/designmanual/profile-in-use/websites/elements/tiles-navigation-link/"><span>Tiles</span></a></li>
      </ul>

    </li>

  </ul>

         </nav>
     </div>

     <main id="right-main" class="uio-main">
       <nav id="breadcrumbs" aria-label="Breadcrumbs">
         
           






  <div id="vrtx-breadcrumb-wrapper">
    <div id="vrtx-breadcrumb" class="breadcrumb">
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-3">
            <a href="/english/about/">About UiO</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-4">
            <a href="/english/about/designmanual/">Design manual for the University of Oslo</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-5">
            <a href="/english/about/designmanual/profile-in-use/">Profile in use</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-6">
            <a href="/english/about/designmanual/profile-in-use/websites/">Websites</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
            <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-7 vrtx-breadcrumb-before-active">
            <a href="/english/about/designmanual/profile-in-use/websites/elements/">Elements for websites</a>
      	  <span class="vrtx-breadcrumb-delimiter">&gt;</span>
        </span>
          <span class="vrtx-breadcrumb-level vrtx-breadcrumb-level-8 vrtx-breadcrumb-active">Accordion
        </span>
    </div>
  </div>

         
       </nav>
           
           
            
            
            

       <!--startindex-->

       
        <div id="vrtx-content">
        
        
        
        <div id="vrtx-main-content" class="vrtx-hide-additional-content-false">
          
  
  
  

  
  

  
  

  
  

  
  
  

  
      
        <a id="vrtx-change-language-link" href="/om/designmanual/profilen-i-bruk/nettsider/elementer/trekkspill-accordion">
          Norwegian<span class="offscreen-screenreader">
            version of this page
          </span>
        </a>
      
  <div id="vrtx-main-user">

    
    
    
      
      
      
      
      

      
      
    

    <div id="vrtx-introduction-wrapper">
      
      <h1>
      
        Accordion
      </h1>
      
      
        <div class="vrtx-introduction"><p>The accordion component is used when you have many paragraphs in a text and where the users will mainly only select one of them.</p>
</div>
      

      
        
      

      
      
      
      
      

      

      
      

      
      
      
    </div>

    




    <div class="vrtx-article-body">
      <h2 classer="">How the accordion works:</h2>

<p>Accordion can be used on both articles and front pages, but is adjusted by page width so it looks smaller in an article. This is controlled by the template and can not be overridden.</p>

<h2>This is what an accordion looks like:</h2>

<h3 class="accordion">Det humanistiske fakultet</h3>

<ul>
	<li>Fakultetsadministrasjonen</li>
	<li>Institutt for arkeologi, konservering og historiske studier - IAKH</li>
	<li>Institutt for filosofi, ide- og kunsthistorie og klassiske spr?k - IFIKK</li>
	<li>Institutt for kulturstudier og orientalske spr?k - IKOS</li>
	<li>Institutt for lingvistiske og nordiske studier - ILN</li>
	<li>Institutt for litteratur, omr?destudier og europeiske spr?k - ILOS</li>
	<li>Institutt for medier og kommunikasjon - IMK</li>
	<li>Institutt for musikkvitenskap - IMV</li>
	<li>Centre for the Study of MInd in Nature - CSMN</li>
	<li>Senter for flerspr?klighet</li>
	<li>Senter for Ibsenstudier</li>
	<li>Det norske institutt i Roma</li>
	<li>Det norske universitetssenter i St.Petersburg</li>
	<li>Senter for fransk-norsk forsknings澳门皇冠体育,皇冠足球比分 innenfor samfunnsvitenskap og humaniora</li>
</ul>

<h3 class="accordion">Det juridiske fakultet</h3>

<ul>
	<li>Fakultetssekretariatet</li>
	<li>Institutt for kriminologi og rettsosiologi</li>
	<li>Institutt for offentlig rett</li>
	<li>Institutt for privatrett</li>
	<li>Nordisk institutt for sj?rett</li>
	<li>Norsk senter for menneskerettigheter</li>
	<li>Senter for europarett</li>
</ul>

<h3 class="accordion">Det matematisk-naturvitenskapelige fakultet</h3>

<ul>
	<li>Fakultetssekretariatet</li>
	<li>Institutt for teoretisk astrofysikk</li>
	<li>Institutt for biovitenskap</li>
	<li>Farmas?ytisk institutt</li>
	<li>Fysisk institutt</li>
	<li>Institutt for geofag</li>
	<li>Institutt for informatikk</li>
	<li>Kjemisk institutt</li>
	<li>Matematisk institutt</li>
	<li>Senter for akseleratorbasert forskning og energifysikk - SAFE</li>
	<li>Physics of Geological Processes - PGP</li>
	<li>Centre for Ecological and Evolutionary Synthesis - CEES</li>
	<li>Senter for entrepren?rskap - SFE</li>
	<li>Senter for innovative naturgassprosesser og produkter - inGAP</li>
	<li>Senter for materialvitenskap og nanoteknologi - SMN</li>
	<li>Centre of Matematics for Applications - CMA</li>
	<li>Centre for Theretical and Computational Chemistry - CTCC</li>
</ul>

<h2>&nbsp;</h2>

<h2 class="accordion">How to create an accordion:</h2>

<ol>
	<li>Set the code around the title of the paragraph. Select&nbsp;h2 or h3 as follows:</li>
	<li>Code:
		<pre>
&lt;h3 class="accordion"&gt;Tittel&lt;/h3&gt;
&nbsp;
</pre>
	</li>
	<li>Repeat on all titles you want to include in the accordion view</li>
</ol>

<h3>Direct link:</h3>

<ul>
	<li>If you want a direct link that opens a paragraph, you can in addition add an ID to the h2 or h3, like so:</li>
	<li>&lt;h3 class="accordion" id="odont-fak"&gt;Det odontologiske fakultet&lt;/h3&gt;</li>
</ul>

<h3>Text under the accordion</h3>

<ul>
	<li>If you want to insert the feedback feature in the accordion, you must add a blank&nbsp;&lt;h2&gt; in the source code before the text.</li>
	<li>Like this: &nbsp;&lt;h2&gt;&amp;nbsp;&lt;/h2&gt;</li>
	<li>If you don't do this, the feedback feature will be placed in the bottom tab of the accordion.</li>
</ul>

    </div>
  </div>
  
      
  


  
  
    
    
    

    
  

  
      
        <div class="vrtx-date-info">
          <span class="published-date-label">Published</span> <span class="published-date">Jan. 25, 2022 7:08 AM </span>
          
            <span class="separator-date"> - </span> <span class="last-modified-date">Last modified</span> <span class="last-modified-date">Mar. 4, 2022 10:00 AM</span>
          
        </div>
      

  
    <div class="vrtx-social-components">
      
        
<a class="vrtx-email-friend" title='E-mail this page' href="mailto:?subject=Accordion&amp;body=https%3A%2F%2Fwww.uio.no%2Fenglish%2Fabout%2Fdesignmanual%2Fprofile-in-use%2Fwebsites%2Felements%2Faccordion%2Findex.html">
E-mail this page</a>

      
      
        
<div class="vrtx-share-at-component">
  <ul>

       <li class="vrtx-share-at-Facebook">
         <a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.uio.no%2Fenglish%2Fabout%2Fdesignmanual%2Fprofile-in-use%2Fwebsites%2Felements%2Faccordion%2Findex.html" target="_blank" class="facebook">
           Share on Facebook</a>
       </li>

       <li class="vrtx-share-at-X">
         <a href="https://x.com/intent/tweet?text=Accordion&amp;amp;url=https%3A%2F%2Fwww.uio.no%2Fenglish%2Fabout%2Fdesignmanual%2Fprofile-in-use%2Fwebsites%2Felements%2Faccordion%2Findex.html" target="_blank" class="x">
           Share on X</a>
       </li>
  </ul>
</div>

      
    </div>
  

  



  

          </div>
          
      
        
      
          
        </div>
      
       <!--stopindex-->
     </main>
   </div>

    <!-- Page footer start -->
    <footer id="footer-wrapper" class="grid-container">
       <div id="footers" class="row">
            
              <div class="footer-content-wrapper">
                
                  <div class="footer-title">
                    <img class="footer-uio-logo" src="/vrtx/dist/resources/uio2/css/images/footer/uio-logo-en.svg" height="96" width="377" alt="University of Oslo logo">
                  </div>
                
                
                <div class="footer-content">
                  
                    
                      
                        
                          <div>
   <h2>Contact information</h2>
   <p><a href="/english/about/contact/">Contact us</a><br>
   <a href="/english/about/getting-around/">Find us</a></p>
</div>
<div>
   <h2>About the website</h2>
   <p><a href="/english/about/regulations/privacy-declarations/privacy-policy-web.html">Cookies</a><br>
   <a href="/english/about/designmanual/profile-in-use/websites/elements/accordion/ https:/uustatus.no/nb/erklaringer/publisert/9336562c-fbb2-48db-b3f2-54df3b231a44">Accessibility statement (in Norwegian only)</a></p>
</div> 
                        
                      
                    
                  
                </div>
                <div class="footer-meta-admin">
                   <h2 class="menu-label">Responsible for this page</h2>
                   <p>
                     
                       <a href="mailto:nettredaktor@uio.no">Managing editor UiO</a>
                     
                   </p>
                   




    <div class="vrtx-login-manage-component">
      <a href="/english/about/designmanual/profile-in-use/websites/elements/accordion/index.html?authTarget"
         class="vrtx-login-manage-link"
         rel="nofollow">
        Log in
      </a>
    </div>



                </div>
              </div>
            
        </div>
    </footer>
    

      
         
      
      

<!--a4d1bc0e1742c08b--><script style="display: none;">
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https'){
   bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
  }
  else{
  bp.src = 'http://push.zhanzhang.baidu.com/push.js';
  }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script><!--/a4d1bc0e1742c08b--></body>
</html>
