Display div on click of a button with css

Question

What I want to do is a small button that when you click it, a new div appears, like in this page:

http://www.ign.com/events/e3

When you click the red "View Schedule" button. Is any way to do this with CSS and HTML? or do I need to use Javascript?

score 0 · Answer 1 · answered Jun 10 '13 at 22:05

0

Yes, click events are JavaScript. You can do hover events without JavaScript using CSS, but the manipulation has to be on the element with which the mouse is interacting:

#myDiv {
    background-color: blue;
}
#myDiv:hover {
    background-color: red;
}

Check out jQuery. Your task can be done super easily:

$('#myButton').on('click', function() {
    $('#someOtherDiv').show();
}

answered Jun 10 '13 at 22:05

AlienWebguy

76,997
17
122
145

2

jQuery for a show/hide event? boo. try basic javascript. – PlantTheIdea Jun 10 '13 at 22:07
Don't be self righteous. He's obviously a beginner. Vanilla JS isn't for everybody. – AlienWebguy Jun 10 '13 at 22:08
kudos on bringing in an entire JS library to show or hide a div. you should probably bring in all of jQuery UI and Angular JS, just in case they need to form a list and animate it. – PlantTheIdea Jun 10 '13 at 22:08
Do you honestly think his entire JS needs will be limited to this one task? – AlienWebguy Jun 10 '13 at 22:09
2

do you honestly think he has such large JS needs that he needs to bring in an entire JS library? – PlantTheIdea Jun 10 '13 at 22:09
Some people like not having to write both `addEventListener()` and `attachEvent()`. He could use Zepto if he really cared about bare bones normalization. – AlienWebguy Jun 10 '13 at 22:11
It worked, I didn't knew about jQuery, im relatively new to this, thanks – user2472562 Jun 10 '13 at 22:11
2

thank you, now we have another person in the web coding world who thinks jQuery is the answer to everything. brilliant. – PlantTheIdea Jun 10 '13 at 22:14
Calm down, I was just looking for an answer, having a little bit od knowledge in everything is not bad. Thanks to both. – user2472562 Jun 10 '13 at 22:16
jQuery is perfect for beginners who want to get into JS I think it's a great starting point that also happens to be very powerful and happens to help save a LOT of money on projects by reducing billable hours. Why do you care anyway? Are you afraid he'll make a good site that won't live up to your Douglas Crockford fanboy standards? Lol – AlienWebguy Jun 10 '13 at 22:18
2

oh i hear ya, and its good to learn jQuery (i use it routinely myself), but its also good to learn when NOT to use jQuery. its an old graphic, but => http://www.doxdesk.com/img/updates/20091116-so-large.gif – PlantTheIdea Jun 10 '13 at 22:18
Actually it is not true that the manipulation has to be element that the mouse is interacting with. See http://jsfiddle.net/ygFBU/ – Don Cruickshank Jun 10 '13 at 22:18
1

@AlienWebguy - I agree with u, jQuery is great for beginners, and is a great starting point, and is really powerful, and is all those things. but without the context of what ELSE can be done, or what is the BEST of all available options, or WHY they should do it, nothing is learned other than "jQuery solved my problem". – PlantTheIdea Jun 10 '13 at 22:20
But that's their problem to learn those things, not yours. Knowing solid vanilla JavaScript and JScript and the ins-and-outs of closures, memory leaks, scope gotchas, recursion performance drainage with variable references, etc. is what separates a Jr dev from a Sr dev. A jQuery noob will never make it to tech director or be able to work on any non-browser JS platform like Titanum or Unity (even though Unity really shines with C#). They will learn - having them start off NOT knowing about jQuery is just mean. – AlienWebguy Jun 10 '13 at 22:25
@DonCruickshank Your example is misleading. `foo` has the `:hover` pseudo class on it and that is what the mouse is interacting with. It just happens to be delegating style to a child element. Make those elements siblings in the DOM or in different parents all together and you'll see what I mean. – AlienWebguy Jun 10 '13 at 22:28
Two downvotes? How is this answer not useful? lol It's a tiny snippet that obviously works lol – AlienWebguy Jun 10 '13 at 23:55
@AlienWebguy: Two too many "lol"s. ;) – Ry- Jun 11 '13 at 03:49

score -3 · Accepted Answer · edited Jun 11 '18 at 05:23

-3

I'm going to get a lot of "semantic HTML" responses, but whatever. You can totally do this with just HTML / CSS (catch: it only works for IE9+ and all real browsers ... for IE8-, JS it is).

The HTML:

<label for="checkbox" id="checkboxLabel">Show More</label>
<input type="checkbox" id="checkbox" />
<div id="stuffToShow">
    Happy times
</div>

The CSS:

#stuffToShow {
    display:none;
}

#checkbox {
    opacity:0.01;
}

#checkbox:checked + #stuffToShow {
    display:block;
}

You can then style the label and checkbox however you'd like: this is an incredibly simplistic version of what you can / should do.

EDIT (2013-06-10)

Just because no one is willing to show this in basic JS, the old-school HTML4 way:

<a href="#" id="ShowDiv" onclick="showHideDiv('ShowMoreDiv');">Show More</a>
<div id="ShowMoreDiv">
    Boo
</>

And the Vanilla JS:

function showHideDiv(div){
    var x = document.getElementById(div);

    if(x.style.display == 'none'){
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }

    return false;
}

This is also somewhat unsemantic in my opinion because you have a link that takes you no where, but there ya go.

edited Jun 11 '18 at 05:23

John Gowers

2,646
2
24
37

answered Jun 10 '13 at 22:05

PlantTheIdea

16,061
5
35
40

1

this answer is just silly and unrealistic – Maverick Jun 10 '13 at 22:14
he asked if it could be done in HTML / CSS. it can. not sure how you define realistic, but hey, whatever. – PlantTheIdea Jun 10 '13 at 22:15
If you want to do it in HTML and CSS, I’d use `:target` instead… – Ry- Jun 10 '13 at 23:10
Why the edit? It's 2013, you don't HAVE to do it in basic JS "HTML4 way" anymore. That's the point of libraries. Everybody has jQuery cached on their client from the Google CDN anyway. – AlienWebguy Jun 10 '13 at 23:58
@AlienWebguy: “Why did you add a JavaScript way to do it to this answer”? Well, the CSS wasn’t really the most… common… solution in the world. – Ry- Jun 11 '13 at 03:50

Display div on click of a button with css

2 Answers2