What are the codes for tabs/accordions?

[call me rae]

Maybe I'm being a derp but is the tab/accordion buttons gone?


If so if anyone who knows how to do HTML could tell me the basic codes for those functions that would be awesome.

 

[Chordling]

I do not believe that there was ever a button for tabs or accordions, only for the spoilers.  This HTML test thread shows a wonderful example of tabs.

 

[call me rae]

I do not believe that there was ever a button for tabs or accordions, only for the spoilers.  This HTML test thread shows a wonderful example of tabs.

There was waaaaay in the beginning. Two buttons for the tabs and accordions. I remember because they had a glitch where they wouldn't break text into paragraphs and lots of people myself included complained about that. But thanks for the link

 

[Dugym]

They're missing for me too.

 

[Kaerri]

We used to have buttons, but they aren't available now.  I expect they'll make a reappearance when we finish and release the big coding update.

 

[Lady Warlock]

We used to have buttons, but they aren't available now.  I expect they'll make a reappearance when we finish and release the big coding update.

Do you happen to know of a way to make accordions in the meantime? I have some work that used accordions and I moved to edit things and then I couldn't get the accordions back. All the HTML code I try to look up seems to include more than just html and css and I'm not sure if it will work on the site. I'd rather not leave a page a mess while I wait for the big code update if I don't have to. 

 

[Chordling]

4 minutes ago, DaughterofAthena said:



Do you happen to know of a way to make accordions in the meantime? I have some work that used accordions and I moved to edit things and then I couldn't get the accordions back. All the HTML code I try to look up seems to include more than just html and css and I'm not sure if it will work on the site. I'd rather not leave a page a mess while I wait for the big code update if I don't have to. 




 

From what I have found, there are ways, but they need JavaScript coding in order to function, which the site does not permit.

 

[Lady Warlock]

From what I have found, there are ways, but they need JavaScript coding in order to function, which the site does not permit.

I will reword... ways to make accordions on site that could be used in the absence of buttons? I've seen accordions that still work and I don't understand how that can be possible if the buttons don't exist and if the coding makes no sense. 

 

[Kaerri]

I have no idea.  I haven't learned any HTML yet.  Sorry :/


@Anomaly, any ideas?

 

[Chordling]

14 minutes ago, DaughterofAthena said:



I will reword... ways to make accordions on site that could be used in the absence of buttons? I've seen accordions that still work and I don't understand how that can be possible if the buttons don't exist and if the coding makes no sense. 




 

Could you link us to one of the posts that contains the functioning accordion?  I'm just curious to see what the coding looks like.

 

[Lady Warlock]

Could you link us to one of the posts that contains the functioning accordion?  I'm just curious to see what the coding looks like.

I've actually looked and realized that they were tabs. 


I do have an accordion in my workshop that I just copied from an online resource and it works, but I don't understand it and I'm afraid that changing any one little thing is going to break it. 


I can copy and paste that code if you'd like to see it. 


I was just looking online and I stumbled on it. 

 

[Chordling]

I can copy and paste that code if you'd like to see it. 

Sure!  I'd love to see it.  I've been struggling to figure out how to make an accordion work myself.

 

[Lady Warlock]

Sure!  I'd love to see it.  I've been struggling to figure out how to make an accordion work myself.

#accordion{
width: 100%;
margin: 0px;
padding: 0px;
list-style: none;
}
#accordion h2{
font-size: 12pt;
margin: 0px;
padding: 10px;
background: #ccc;
border-bottom: 1px solid #fff;
}
#accordion li div.content{
display: none;
padding: 10px;
background: #f9f9f9;
border: 1px solid #ddd;
}
#accordion li:hover div.content{
display: inherit;
}

• 
  Title One
  
  
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  
• 
  Title Two
  
  
  
  Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
  
• 
  Title Three
  
  
  
  Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
  
• 
  Title Four
  
  
•  
  
• I don't know how to change it to the accordions opening with a click instead of hover. Changing it to active doesn't work. 
  

Here's the code:

Spoiler

<p>
&nbsp;
</p>
<style type="text/css">
#accordion{
width: 600px;
margin: 0px;
padding: 0px;
list-style: none;
}
#accordion h2{
font-size: 12pt;
margin: 0px;
padding: 10px;
background: #ccc;
border-bottom: 1px solid #fff;
}
#accordion li div.content{
display: none;
padding: 10px;
background: #f9f9f9;
border: 1px solid #ddd;
}
#accordion li:hover div.content{
display: inherit;
}</style>
<ul id="accordion">
<li>
<h2>
Title One
</h2>

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</div>
</li>
<li>
<h2>
Title Two
</h2>

<div class="content">
Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
</div>
</li>
<li>
<h2>
Title Three
</h2>

<div class="content">
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
</div>
</li>
<li>
<h2>
Title Four
</h2>

<div class="content">
Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
</ul>

Again, I just found this online and realized that it kinda works in the site. I don't know anything about the code. In fact, looking at it confuses me. I don't know why Title Four doesn't open and I don't know how to make it so that if you click something, it opens and stays open. When you change "Hover" to "active", then you have to click and hold to get it to stay open. 

 

[Chordling]

I don't know how to change it to the accordions opening with a click instead of hover. Changing it to active doesn't work. 

Do you remember which source you got the coding from?

 

[Lady Warlock]

Do you remember which source you got the coding from?

I can check my history. Give me a few minutes and I'll see what I find. 

 

[Lady Warlock]

@Musician This one: http://cssjockey.com/how-to-create-pure-css-accordion/ . 

 

[Lady Warlock]

I just found this one as well: http://codepen.io/CesarGabriel/pen/tLDwH . This one works on clicks instead and there's a lot that's different. 

 

[Chordling]

Since all of those are lovely examples, here is the breakdown for both of them.


Accordions with Hover

Spoiler

<style type="text/css">#accordion{
width: 600px;
margin: 0px;
padding: 0px;
list-style: none;
}
</style>


This part of your CSS will change how the accordion looks like, specifically the size.



<style type="text/css"> {
#accordion h2{
font-size: 12pt;
margin: 0px;
padding: 10px;
background: #ccc;
border-bottom: 1px solid #fff;
}</style>


This changes what the header, or if you prefer, "title", will look like, including its background, size, color, etc.  Yay possibilities!



<style type="text/css"> {

#accordion li div.content{
display: none;
padding: 10px;
background: #f9f9f9;
border: 1px solid #ddd;
}
</style>


This part allows you to customize the content within the accordion.



<style type="text/css"> {

#accordion li:hover div.content{
display: inherit;
}
</style>


Lastly, this is what allows the accordion to open with the hover.





 

Accordions with Click

Spoiler

<style type="text/css">{
font-family: Arial, sans;
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
</style>


This is all of your basic formatting CSS.



<style type="text/css"> {
h1, h2 {
margin: 1em 0 0 0;
text-align: center;
}
h2 {
margin: 0 0 1em 0;
}
</style>


This coding changes the headers.



<style type="text/css"> {
#container {
margin: 0 auto;
width: 20%;
}
</style>


Here, you can edit the size of your accordion.



<style type="text/css"> {
#accordion input {
display: none;
}
</style>


This makes your accordion an accordion.  You will see later that the HTML uses check boxes.  This hides the checkboxes to make the coding act as an accordion.  So, instead of a jacked up list, you have jacked up checkboxes.



<style type="text/css"> {

#accordion label {
background: #b80b0b;
border-radius: .25em;
cursor: pointer;
display: block;
margin-bottom: .125em;
padding: .25em 1em;
z-index: 20;
}
#accordion label:hover {
background: #ccc;
}

#accordion input:checked + label {
background: #ccc;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
color: white;
margin-bottom: 0;
}
#accordion article {
background: #f7f7f7;
height:0px;
overflow:hidden;
z-index:10;
}
#accordion article p {
padding: 1em;
}
</style>


Make everything pretty! :3



<style type="text/css"> {
}
#accordion input:checked article {
}
#accordion input:checked ~ article {
border-bottom-left-radius: .25em;
border-bottom-right-radius: .25em;
height: auto;
margin-bottom: .125em;
}
</style>


The rest of the CSS allows you to format more of your accordion.



<section id="accordion">
<div>
<input type="checkbox" id="check-1" />
<label for="check-1">Option 1</label>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, odit, quia hic ipsam laboriosam dignissimos suscipit eligendi! Aspernatur, ad, suscipit officiis repellat consequuntur quod quibusdam sint nobis magnam voluptates veritatis?</p>
</article>
</div>
</section>


Here is the HTML for an individual accordion.  Copy, paste, rinse, repeat.





 

 

[Dugym]

Don't forget tabs!

 

[Chordling]

Tabs have been mentioned back here.

 

[Dusky]

I think @ViAdvena has a mini tutorial on this that she could link to.

 

[ewolf20]

If anyone wants to know how to use accordions then here you go http://www.w3schools.com/howto/howto_js_accordion.asp

 

[IctoraPost]

From what I have found, there are ways, but they need JavaScript coding in order to function, which the site does not permit.

The site does permit JavaScript, but only the simple stuff, like tabs and accordians.

 

[Fable]

The site does permit JavaScript, but only the simple stuff, like tabs and accordians.

I wonder how JS works as far as formatting in the source goes... as I've never used JS before. O_o;