Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import or require. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

                  <div id="app" style="width:80%; margin:20px auto 0;">
            <accordion title="Sasuke Uchiha" active="true">
              <p>Sasuke is introduced in Part I as a young, spiky-black-haired pre-teen wearing a blue shirt with an image of a fan that represents his clan on its back. He also wears short white pants and a Konohagakure headband. Early in the series, Orochimaru brands Sasuke with a Cursed Seal that, when activated, covers his body with black marks and later gives him gray skin, white hair, and claw-like wings.  In Part II, he is normally depicted wearing a white kimono and black pants. Although he is skilled in the use of shuriken, in Part II Sasuke uses a chokutō sword that he calls Kusanagi. In addition to using Kusanagi for swordsmanship, Sasuke combines it with lightning-based techniques to increase the power of his attacks. In The Last: Naruto the Movie, his adult wardrobe consists of gray pants and a light-brown cloak over a black shirt, while in Boruto: Naruto the Movie, he wears black pants and a black cape over a lilac vest.</p>
              <p>Sasuke is a silent character who tries to gain more power and kill his older brother, Itachi, for betraying and murdering their clan.  He cares about his teammates and saves them on numerous occasions, but he severs all of his bonds later in Part I, believing this will strengthen him. Sasuke is moved when Naruto Uzumaki wants him to make peace with the village; he considers Naruto his only friend. Sasuke becomes more kindhearted by the end of the series, but he decides not to return home, chooses to redeem himself, and searches for an enemy threatening the peace of Konohagakure.</p>
            <accordion title=" Naruto Uzumaki">
              <p>Naruto is an orphan who has a dangerous fox-like entity known as Kurama the Nine-Tailed Fox sealed within his body by his father, the Fourth Hokage Minato Namikaze, the leader of Konoha's ninja force, at the cost of his own life and that of his wife, Kushina Uzumaki. This possession led to Naruto being ridiculed frequently by the rest of Konoha; being associated with him was considered taboo. As a youth, Naruto makes jokes and plays pranks to attract attention. Desiring what he lacked in his early life, Naruto dreams of becoming a Hokage himself with the hope that it will bring him the villagers' recognition and respect. In an attempt to become a ninja, Naruto is horrified to learn of his Jinchuriki nature, but finds acceptance from his teacher Iruka Umino, whom he views as a father. After learning the powerful Multi-Shadow Clone Jutsu, an ability to create physical copies of the user, Naruto becomes a ninja. He joins a ninja group under the leadership of Kakashi Hatake where he gains the friends he lacked during his childhood. These are his classmates who are also assigned to Team 7: Sasuke Uchiha, with whom he has had a rivalry since they first met at the ninja academy, and Sakura Haruno.</p>
            <accordion title="Kakashi Hatake">
              <p>Kakashi Hatake is introduced as the Jonin (elite ninja) leader and in charge of Team 7, a new ninja team including Naruto Uzumaki, Sasuke Uchiha and Sakura Haruno. He first appears as a carefree character as he tends to lose track of time, and is frequently late to his appointments as a result. However, when testing his students, Kakashi reveals himself as a strong opponent to the point where he fights while reading Make Out series of erotic novels. Kakashi is revealed to be very famous in the Naruto world, earning him the moniker "Kakashi of the Sharingan" for possessing the Sharingan, gaining it from a member of the Uchiha clan he was friends with. It grants him the ability to mimic the movements and jutsu of others. Although most of Kakashi's abilities were acquired with his Sharingan, he also invented the Chidori ("One Thousand Birds") and its Lightning Blade variation, a collection of lightning chakra in one's hand that uses the Sharingan's visual ability to lock onto a target.  When first forming Team 7, Kakashi does not turn them into his students until instilling in them the concept of teamwork even if they have to break the rules he gave them. Kakashi continues to further this philosophy for the duration of Part I upon Sasuke Uchiha but is unable to get through to him before the latter's defection from Konoha. Kakashi also reluctantly participates in various kinds of challenges by his childhood friend Might Guy who considers Kakashi his rival. </p>

                      Vue.component('accordions', {
            template: `
                    <div class="accordion" >
                    </div><!-- .accordion -->

        Vue.component('accordion', {
            template: `
                <div class="card">
                    <div class="card-header" :id="accordionName">
                        <h2 class="mb-0">
                            <button class="btn btn-link" @click.prevent="accordionToggle" type="button" data-toggle="collapse" :data-target="accordionTarget" :aria-expanded="accordionActive" aria-controls="accordionName">
                    <div :id="accordionName" v-show="this.accordionActive"  :aria-labelledby="accordionName">
                        <div class="card-body">
            data() {
              return { 
                accordionActive : []
            props: {
                title: {required: true},
                active: {default : false}
            computed : {
                    return this.title.toLowerCase().replace(/ /g, '-');
                    return '#' + this.title.toLowerCase().replace(/ /g, '-');
            methods : {
                  this.accordionActive =;    
                accordionToggle() {
                  this.accordionActive = !this.accordionActive;
            created() {

       var app = new Vue({
           el : '#app'