Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <details>
  <summary>Ingredients</summary>
  <p>
    <ul>
      <li>3 tbsp olive oil</li>
      <li>2 red onions, sliced</li>
      <li>2 red peppers, sliced</li>
      <li>3 red chillies, 2 deseeded and chopped, 1 sliced</li>
      <li>small bunch coriander, stalks finely chopped, leaves roughly chopped
        <li>2 garlic cloves, crushed</li>
        <li>1 tbsp ground coriander</li>
        <li>1 tbsp cumin seeds</li>
        <li>6 skinless chicken breasts, cut into small chunks</li>
        <li>415g can refried beans</li>
        <li>198g can sweetcorn</li>
        <li>700ml bottle passata</li>
        <li>1 tsp golden caster sugar</li>
        <li>10 tortillas</li>
        <li>2 x 142ml pots soured cream</li>
        <li>200g cheddar grated</li>
  </p>
</details>
<details>
  <summary>Step 1.</summary>
  <p>Heat 2 tbsp of the oil in your largest pan, then fry the onions, peppers, chopped chilli and coriander stalks with half the garlic for 10 mins until soft. Stir in 2 tsp ground coriander and 2 tsp cumin seeds, then fry for 1 min more. Meanwhile, in another
    frying pan, fry the chicken in the remaining oil, in batches, until browned – add it to the pan of veg as it is done.</p>
</details>
<details>
  <summary>Step 2.</summary>
  <p>Stir the beans, sweetcorn, coriander leaves and 150ml of the passata into the veg and chicken. In a bowl, mix the rest of the passata with the other crushed garlic clove, the remaining spices and the sugar, then set aside.</p>
</details>
<details>
  <summary>Step 3.</summary>
  <p>To assemble, lay the tortillas onto a board and divide the chicken mixture between them, folding over the ends and rolling up to seal. Divide the passata sauce into the dishes you are using, then top with the enchiladas. Dot over the soured cream, sprinkle
    with grated cheese and scatter with the sliced chilli.</p>
</details>
<details>
  <summary>Step 4.</summary>
  <p>Cool and freeze (see freezing tips, below) or, if eating straight away, heat oven to 200C/180C fan/gas 6, then bake for 30 mins, scattering with more coriander leaves to serve, if you like</p>
</details>
              
            
!

CSS

              
                body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

ul {
  list-style-type: circle;
  max-width: 250px;
}
p {
  width: 290px;
}

summary::-webkit-details-marker {
  display: none
}
summary:after {
  background: #1DE9B6; 
  border-radius: 5px; 
  content: "+"; 
  color: #fff; 
  float: left; 
  font-size: 1.3em; 
  margin: -5px 10px 0 0; 
  padding: 0; 
  text-align: center; 
  width: 20px;
}
details[open] summary:after {
  content: "-";
}
details {
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    color: #363636;
    margin: 0 0 .4em;
    padding: 1%;
}
              
            
!

JS

              
                
              
            
!
999px

Console