html - How to modify this CSS based Accordion to work with multiple accordions on the same page? -

hello have using accordion off website: http://www.hongkiat.com/blog/css-content-accordion/ created paul underwood. love accordion looks great simple css. issue want few separate ones on same page. ruins functionality since same class. there way besides copying , pasting , renaming class many times needed they'd have own class? again overall goal have few of these work on same page.

here code directly off website:

html:

 <div class="accordion vertical">    <section>         <h2>about us</h2>         <p>lorem ipsum dolor sit amet,</p>     </section>    <section>       <h2>services</h2>       <p>lorem ipsum dolor sit amet,</p>   </section>    <section>       <h2>blog</h2>       <p>lorem ipsum dolor sit amet</p>   </section>    <section>       <h2>portfolio</h2>       <p>lorem ipsum dolor sit amet,</p>   </section>    <section>       <h2>contact</h2>       <p>lorem ipsum dolor sit amet</p>   </section>   </div>   

css:

/**  *  css3 horizontal , vertical accordion  *  author: paul underwood hongkiat.com  *  website: www.paulund.co.uk  *  date: 27/11/11  *  version: 1.0  */   article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 13px; line-height: 1.231; } body, button, input, select, textarea { font-family: sans-serif; color: #222; }  /*define accordion box*/ .accordion { width:830px; overflow:hidden; margin:10px auto; color:#474747; background:#414141; padding:10px; }  /*general accordion****************************************************************************/ /*set style of open slide*/ .accordion section:target { background:#fff; padding:10px;} .accordion section:target:hover { background:#fff; } .accordion section:target h2 {width:100%;} .accordion section:target h2 a{ color:#333; padding:0;} .accordion section:target p {display:block;} .accordion section h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }  /*set style of closed slide*/ .accordion section{ float:left; overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; } .accordion section:hover {background:#444;} .accordion section p { display:none; } .accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;} .accordion section:nth-child(1):after{content:'1';} .accordion section:nth-child(2):after{content:'2';} .accordion section:nth-child(3):after{content:'3';} .accordion section:nth-child(4):after{content:'4';} .accordion section:nth-child(5):after{content:'5';} /*end general     accordion****************************************************************************/  /*horizontal accordion *********************************************************************/ .horizontal section{ width:5%; height:250px;  -moz-transition:width 0.2s ease-out;  -webkit-transition:width 0.2s ease-out; -o-transition:width 0.2s ease-out; -ms-transition:width 0.2s ease-out; transition:width 0.2s ease-out; }  /*position number of slide*/ .horizontal section:after{top:140px;left:15px;}  /*header of closed slide*/ .horizontal section h2 {  -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); width:240px; position:relative; left:-100px; top:85px; }   /*on mouse on open slide*/ .horizontal :target{ width:73%;height:230px; } .horizontal :target h2{ top:0px;left:0; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);  } /*end horizontal accordion *********************************************************************/  /*vertical accordion *************************************************************************/ .vertical section{ width:100%; height:40px; -webkit-transition:height 0.2s ease-out; -moz-transition:height 0.2s ease-out; -o-transition:height 0.2s ease-out; -ms-transition:height 0.2s ease-out; transition:height 0.2s ease-out; } /*set height of slide*/ .vertical :target{ height:250px; width:97%; }  .vertical section h2 { position:relative; left:0; top:-15px; }  /*set position of number on slide*/ .vertical section:after{ top:-60px;left:810px;} .vertical section:target:after{ left:-9999px;} 

no css changes necessary. should able change names of ids , targets in html new table, e.g.

    <div class="accordion vertical">       <section id="foo">           <h2><a href="#foo">foo</a></h2>           <!-- content -->           <p>lorem ipsum dolor</p>       </section>     </div> 

etc ...