Author Topic: HTML Question  (Read 5503 times)

0 Members and 1 Guest are viewing this topic.

Offline JohnE

  • The Beast
  • *****
  • Posts: 1882
  • Gender: Male
  • Heeeere's JohnE!
HTML Question
« on: October 22, 2013, 10:01:59 pm »
Is there a way in html to make a collapsable section, kinda like our forum spoiler tags? I'd like to be able to make a page with sections that can be expanded, with additional info. Kinda like this:

* * *

Cats are awesome.
(click to show/hide)

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #1 on: October 22, 2013, 11:53:24 pm »
Hey JohnE,

If you can include a jQuery file into the page and know CSS, it's pretty easy. First, upload and include the latest version of jQuery between <head> and </head>, if you don't already have it in there.

There are various ways you can do it, but here's an example.

First, some HTML:

<span onclick="$('.spoiler').toggleClass('showme');">Spoiler</span> (click to show/hide)
<div class="spoiler">Here's some hidden text</div>

It doesn't matter what tags you use, as long as you have the onclick on the thing you'll be clicking on, and a matching class name in the thing you want to hide and show. In this case, the onclick looks for a class name of "spoiler", then adds or removes the class of "showme" from that tag. You can use whatever class names you want instead of spoiler and showme, as long as they match in the appropriate places.

The function is defined in the jQuery file, and the rest is done with CSS.

.spoiler { display: none; }
.showme { display: block; }

I don't know your experience level with CSS, so if you need some direction on actually styling it, don't hesitate to ask. :)


Edit: Just noticed a typo in one of the class names that could have made things really confusing.
« Last Edit: October 23, 2013, 12:01:55 am by Neith »

Offline Shane for Wax

  • Official Mosin Nagant Fanboy, Crazy, and Lord of Androgynes
  • Kakarot
  • ******
  • Posts: I am a geek!!
  • Gender: Male
  • Twin to shy, lover of weapons, pagan, wolf-brother
    • Game Podunk
Re: HTML Question
« Reply #2 on: October 22, 2013, 11:58:06 pm »
Code: [Select]
<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
PUT CONTENT YOU WISH TO HIDE HERE
</div></div>   

Code: [Select]
<style type="text/css">
/* animated spoiler CSS by Bloggersentral.com */
.spoilerbutton {display:block;margin:5px 0;}
.spoiler {overflow:hidden;background: #f5f5f5;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value="Show"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Hide"] + .spoiler {padding:5px;}
</style>

I think.

&
"The human race. Greatest monsters of them all."
"Ke barjurir gar'ade, jagyc'ade kot'la a dalyc'ade kotla'shya."
Fucking Dalek twats I’m going to twat you over the head with my fucking TARDIS you fucking fucks!

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #3 on: October 23, 2013, 12:22:08 am »
That's a nice sliding effect, it doesn't require jQuery, and it changes text. Nice. :)

One way I use the jQuery code is to nest the onclick inside the element that gets the class name added and removed. When used with @media queries for responsive design, it's a great way to make menus collapse in mobiles, while not collapsing on a desktop.

Off the top of my head (there might be mistakes in here)...

Code: [Select]
<div class="menu menu1">
<h3 onclick="$('.menu1').toggleClass('open');">Heading 1</h3>
<ul>
   <li><a...>Link 1</a></li>
   <li><a...>Link 2</a></li>
   <li><a...>Link 3</a></li>
</ul>
</div>
<div class="menu menu2">
<h3 onclick="$('.menu2').toggleClass('open');">Heading 2</h3>
<ul>
   <li><a...>Link 1</a></li>
   <li><a...>Link 2</a></li>
   <li><a...>Link 3</a></li>
</ul>
</div>

CSS:

Code: [Select]
.menu ul {
   display: none;
}
.open ul {
   display: block;
}
.menu h3 {
   background: #ccc url('plus.png') left center no-repeat;
   padding-left: 25px;
}
.open h3 {
   background-image: url('minus.png');
}

There would be more styling, of course, but this gives you the basic concept.

ontouchstart responds more quickly than onclick on a touch device, but unfortunately, some mobile devices still can't handle it.


Edit to add minus.png for .open h3. I knew I'd forget something. :-\
« Last Edit: October 23, 2013, 12:31:46 am by Neith »

Offline JohnE

  • The Beast
  • *****
  • Posts: 1882
  • Gender: Male
  • Heeeere's JohnE!
Re: HTML Question
« Reply #4 on: October 23, 2013, 01:19:04 am »
Thanks guys! Booker, I'm testing out your solution now and it seems to be working.

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #5 on: October 23, 2013, 01:24:31 am »
You're welcome, JohnE. :)

Offline Shane for Wax

  • Official Mosin Nagant Fanboy, Crazy, and Lord of Androgynes
  • Kakarot
  • ******
  • Posts: I am a geek!!
  • Gender: Male
  • Twin to shy, lover of weapons, pagan, wolf-brother
    • Game Podunk
Re: HTML Question
« Reply #6 on: October 23, 2013, 04:50:58 am »
That's a nice sliding effect, it doesn't require jQuery, and it changes text. Nice. :)


Thanks!

Thanks guys! Booker, I'm testing out your solution now and it seems to be working.

Excellent! Glad to help.

&
"The human race. Greatest monsters of them all."
"Ke barjurir gar'ade, jagyc'ade kot'la a dalyc'ade kotla'shya."
Fucking Dalek twats I’m going to twat you over the head with my fucking TARDIS you fucking fucks!

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #7 on: October 23, 2013, 12:55:25 pm »
You're welcome, Booker. :)

Offline Old Viking

  • The Beast
  • *****
  • Posts: 1454
  • Gender: Male
  • Occasionally peevish
Re: HTML Question
« Reply #8 on: October 23, 2013, 02:30:47 pm »
I can't answer your question, but I know that HTML is pronounced huh-toom-ul.
I am an old man, and I've seen many problems, most of which never happened.

Offline Dan

  • Apprentice
  • **
  • Posts: 99
  • Gender: Male
Re: HTML Question
« Reply #9 on: October 23, 2013, 03:53:59 pm »
For a CSS2-only solution I'd probably play with the :active pseudo-tag. (Haven't done any HTML/CSS stuff for a few years though, hence no example code...)

Offline Dan

  • Apprentice
  • **
  • Posts: 99
  • Gender: Male
Re: HTML Question
« Reply #10 on: October 25, 2013, 01:50:11 pm »
Well, it nearly works:

Code: [Select]
<html>
  <head>
    <title>Collapsing Block</title>

    <style>
    .collapse .collapsecontent {display:none;}

    .collapse:active  .collapsecontent {display: block; }
    </style>
  </head>
  <body>
   <div class="collapse">
    <p class="collapselabel">Click Me (1)</p>
    <p class="collapsecontent">This is the content (1).</p>
   </div>

   <div class="collapse">
    <p class="collapselabel">Click Me (2)</p>
    <p class="collapsecontent">This is the content (2).</p>
   </div>

   <div class="collapse">
    <p class="collapselabel">Click Me (3)</p>
    <p class="collapsecontent">This is the content (3).</p>
   </div>
  </body>
</html>

Tested in Chromium: hidden blocks display only while the mouse button is held down. Changing every div to [/i]a[/i] makes the hidden block show when clicked, but it won't hide when clicked again.

Possibly changing the CSS visible instead of display might help, but then while the content is hidden there'd be a big empty space in the page.

Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #11 on: October 25, 2013, 08:26:18 pm »
Changing <div> to <a> would be invalid, because you'd be putting a block-level element inside an inline element. Also, changing <div> to <a> doesn't make any difference in Firefox. I didn't check in any other browsers, but not working in one popular browser is enough.

The only way I can think of doing spoilers purely through CSS without having to keep your mouse over the thing that causes it to display, is to put them in <textarea>s and change colors through textarea:focus. It wouldn't be collapsible, though, and you wouldn't be able to put images, links, or any kind of formatting in the spoilers themselves.

I think Booker's way is best for anyone who isn't already including the jQuery library in their pages. I would probably use a <span> instead of a button, but that's more a matter of preference than functionality.

Code: [Select]
<!doctype html>
<html>
  <head>
    <title>Collapsing Block</title>
    <style type="text/css">
         textarea { background: #ddd; color: #ddd; width: 50%; height: 50px; border: 1px solid #ccc; }
         textarea:focus { background: #fff; color: #000; }
    </style>
  </head>
  <body> 
    <p>Click in box below to read:</p>
    <textarea>Here is a spoiler.</textarea>
    <p>Click in box below to read:</p>
    <textarea>Here is another spoiler.</textarea>
  </body>
</html>

Edit to add:

Possibly changing the CSS visible instead of display might help, ...

It won't. "active" is the element's state when the mouse button is held down on it, and it's no longer active when the mouse button is released. It doesn't matter what properties you define for the active state, it will still only work when it's in that state, the same way :hover only works while the element is being hovered on.
« Last Edit: October 25, 2013, 08:32:01 pm by Neith »

Offline Dan

  • Apprentice
  • **
  • Posts: 99
  • Gender: Male
Re: HTML Question
« Reply #12 on: October 26, 2013, 01:25:12 pm »
Changing <div> to <a> would be invalid, because you'd be putting a block-level element inside an inline element. Also, changing <div> to <a> doesn't make any difference in Firefox. I didn't check in any other browsers, but not working in one popular browser is enough.
Using display: block is a perfectly legitimate method to over-ride the default, and in some situations it's the only sensible solution (e.g. a menu of links where you want the clickable link to be the entire menu item and not just the text within it).


You're right about chaning to <a> though. It doesn't work in Opera either. (I can't check IE.)
Quote
I think Booker's way is best for anyone who isn't already including the jQuery library in their pages. I would probably use a <span> instead of a button, but that's more a matter of preference than functionality.
I'm not at all familiar with jQuery. Is there any reason not to use plain old JavaScript?

Quote
It won't. "active" is the element's state when the mouse button is held down on it, and it's no longer active when the mouse button is released. It doesn't matter what properties you define for the active state, it will still only work when it's in that state, the same way :hover only works while the element is being hovered on.
Hmm. I was under the impression that a link was "active" whenever it has the caret. That's why I thought changing the <div>s to <a>s might help. If I'm wrong about :active this way won't work at all, of course.




Offline Neith

  • Bishop
  • ***
  • Posts: 108
Re: HTML Question
« Reply #13 on: October 26, 2013, 08:21:19 pm »
Using display: block is a perfectly legitimate method...
This is correct, and it's the method that Booker and I both used in the solutions we posted above.

Quote
Quote
I think Booker's way is best for anyone who isn't already including the jQuery library in their pages. I would probably use a <span> instead of a button, but that's more a matter of preference than functionality.
I'm not at all familiar with jQuery. Is there any reason not to use plain old JavaScript?
When you say, "plain old JavaScript," do you mean without CSS? Or do you only mean without jQuery?

jQuery is javascript. It's a javascript file with a lot of pre-written functions in it, which a lot of web developers use so we don't need to reinvent the wheel every time we want to do something that's already defined in that file. The method Booker posted doesn't use jQuery, but both of our methods do combine javascript with CSS. With or without jQuery, it's best to let CSS handle the things it can handle, and use javascript only when necessary. Here, javascript is necessary. I used it to toggle between adding and removing a class in a tag, and Booker used it to change the text on a button. From there, CSS targeted the thing we changed with javascript, and it's the CSS that styles, moves, displays or does whatever we want it to do when the element is in whatever state the javascript tells it to be in.

Quote
Quote
It won't. "active" is the element's state when the mouse button is held down on it, and it's no longer active when the mouse button is released. It doesn't matter what properties you define for the active state, it will still only work when it's in that state, the same way :hover only works while the element is being hovered on.
Hmm. I was under the impression that a link was "active" whenever it has the caret. That's why I thought changing the <div>s to <a>s might help. If I'm wrong about :active this way won't work at all, of course.
I don't know what you mean by "whenever it has the caret."

The standard set by w3c for the :active state is this (emphasis mine):
Quote
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

(source: w3.org)
This is why display:block quits working as soon as you release the mouse button, because the element is no longer active. As I said before, display:block was never the problem. The problem was relying on the :active pseudo-class.

If a browser isn't following the web standards that are set by the w3c, they're doing it wrong. Internet Explorer used to hold a link in its active state until it left the page, but that went against web standards, and IE seems to have corrected this behavior at some point.

I hope this clarifies what I was trying to explain. :)

Offline Dan

  • Apprentice
  • **
  • Posts: 99
  • Gender: Male
Re: HTML Question
« Reply #14 on: October 27, 2013, 12:47:53 pm »
Quote
Hmm. I was under the impression that a link was "active" whenever it has the caret. That's why I thought changing the <div>s to <a>s might help. If I'm wrong about :active this way won't work at all, of course.
I don't know what you mean by "whenever it has the caret."
Wrong word, sorry. The dotted outline that appears around each link in turn when you using the tab key to navigate around a page.

(It also used to appear when you click a link, before the new page loads. That doesn't seem to happen in Chromium, other browsers may vary.)