What's the best way to create buttons that hide/show content?
August 14, 2014 8:39 PM Subscribe
Website designers, can you point me to code or resources that I can use to implement buttons that are supposed to dynamically display content within the web page?
My web design skills are somewhat out of date, and I now have a project (creating a single homepage) that I'd like to accomplish in a more modern way (using CSS positioning instead of tables, etc.). I'm pretty familiar with CSS and DIV tags, though not an expert by any means. I've used (other people's) javascript and jquery a bit, but I don't write it and cannot edit it.
The trouble I'm having is with one interactive part of the page, involving buttons that change the content dynamically. In looking online, trying to find some fairly simple sample code that I can use, I'm not sure what terms to even search on. Everything I find isn't quite right. What is the name of what I'm looking for?
I'll describe the specific thing I'd like to accomplish. The page's graphic design was done by someone else, and my task is to "webify" it. In one part of the page, there are 4 big graphic buttons in a horizontal row, and they are to behave kind of like tabs. Under this button bar is a fixed-size area that will contain text along with a nice photgraphic background. Each tab above, when clicked, will display a different content area below it, with different photo backgrounds, etc. The tabs themselves also need to have a highlighted (glowing) mouseover state.
I tried to use Dreamweaver's 'Spry Tabbed Panels' tool, but it's too confusing for me to customize. A lot of the examples I'm seeing online involve pure-text menu bars, but what I'm building isn't navigation, it's more of an in-page content display thingie.
Also, whatever I use needs to be customizable so that I can create my to-the-pixel layout with it.
Thanks in advance, for any specific resources you can share, book recommendations, or specific search terms that would be useful.
My web design skills are somewhat out of date, and I now have a project (creating a single homepage) that I'd like to accomplish in a more modern way (using CSS positioning instead of tables, etc.). I'm pretty familiar with CSS and DIV tags, though not an expert by any means. I've used (other people's) javascript and jquery a bit, but I don't write it and cannot edit it.
The trouble I'm having is with one interactive part of the page, involving buttons that change the content dynamically. In looking online, trying to find some fairly simple sample code that I can use, I'm not sure what terms to even search on. Everything I find isn't quite right. What is the name of what I'm looking for?
I'll describe the specific thing I'd like to accomplish. The page's graphic design was done by someone else, and my task is to "webify" it. In one part of the page, there are 4 big graphic buttons in a horizontal row, and they are to behave kind of like tabs. Under this button bar is a fixed-size area that will contain text along with a nice photgraphic background. Each tab above, when clicked, will display a different content area below it, with different photo backgrounds, etc. The tabs themselves also need to have a highlighted (glowing) mouseover state.
I tried to use Dreamweaver's 'Spry Tabbed Panels' tool, but it's too confusing for me to customize. A lot of the examples I'm seeing online involve pure-text menu bars, but what I'm building isn't navigation, it's more of an in-page content display thingie.
Also, whatever I use needs to be customizable so that I can create my to-the-pixel layout with it.
Thanks in advance, for any specific resources you can share, book recommendations, or specific search terms that would be useful.
Have you looked into using a framework like Bootstrap or similar?
As an example, Bootstrap has a nice way of doing tabs and panels, either with 'tabby'-looking tabs, or with any other kind of markup.
You can do a lot of good stuff in these frameworks without writing a single line of JS, though of course you can if you want to. They usually have a way to deal with layout and leave the fine detail of the appearance up to you, so you can just build on what's there. They're generally pretty sturdy when we're thinking about browser compatibility or mobile-friendliness. And if you're hoping to get and stay up-to-date then I think they make a great learning aid.
posted by raena at 9:33 PM on August 14, 2014
As an example, Bootstrap has a nice way of doing tabs and panels, either with 'tabby'-looking tabs, or with any other kind of markup.
You can do a lot of good stuff in these frameworks without writing a single line of JS, though of course you can if you want to. They usually have a way to deal with layout and leave the fine detail of the appearance up to you, so you can just build on what's there. They're generally pretty sturdy when we're thinking about browser compatibility or mobile-friendliness. And if you're hoping to get and stay up-to-date then I think they make a great learning aid.
posted by raena at 9:33 PM on August 14, 2014
AJAX seems like overkill here. Bootstrap is a great way to get it done tho it does add a bunch more features you may not want. JqueryUI is also a good option. Looks like (ugly) butt, but(t) you'll be overriding it all anyway.
You can get this done with pure CSS using radio buttons. Strange but true. Check it out.
Browser support isn't great, though -- looks like IE9 might be the oldest that works tho even that may not.
I will say that if you're going to keep doing web stuff getting into Bootstrap or JQueryUI is a good idea -- they both have a bunch of features that you'll find super handy. There's a learning curve for both but it'll pay off big time.
posted by wemayfreeze at 12:25 AM on August 15, 2014
You can get this done with pure CSS using radio buttons. Strange but true. Check it out.
Browser support isn't great, though -- looks like IE9 might be the oldest that works tho even that may not.
I will say that if you're going to keep doing web stuff getting into Bootstrap or JQueryUI is a good idea -- they both have a bunch of features that you'll find super handy. There's a learning curve for both but it'll pay off big time.
posted by wemayfreeze at 12:25 AM on August 15, 2014
Long term, if you don't have an interest in getting to know jQuery better and want to focus more on design, then I'd agree with wemayfreeze that you might want to look into a framework. But the amount of overwriting that needs to be done usually makes me sad.
But for this specific problem, unless I'm misunderstanding you, what you'd want to search for is probably more like 'show / hide content'.
Here's a quick sketch of how I would do it using jQuery: http://jsfiddle.net/cug0g3ne/1/
I tried to keep it pretty generic so you might want to edit the class names in the JS to match whatever it is you would use.
posted by wintrymix at 9:38 AM on August 15, 2014
But for this specific problem, unless I'm misunderstanding you, what you'd want to search for is probably more like 'show / hide content'.
Here's a quick sketch of how I would do it using jQuery: http://jsfiddle.net/cug0g3ne/1/
I tried to keep it pretty generic so you might want to edit the class names in the JS to match whatever it is you would use.
posted by wintrymix at 9:38 AM on August 15, 2014
This thread is closed to new comments.
The basic idea is you set up an empty div and then attach an onclick even to a button or link or what have you and then replace the innerHTML of you empty div with the contents of another file. You don't have to use jquery, of course, but since it's in your tags, I reckon it'll be the way you're most familiar?
Alternately, here's how you do a tabbed ui with jquery. Notably you can have all the content on your one html file and not use ajax if you want. One advantage of ajax is it defers loading until the user clicks the thing that would make the content appear (thus giving the impression of a quicker load time), but ajax content is trickier to get indexed properly by search engines and your page may have little enough content that loading time isn't that big a deal anyways.
posted by juv3nal at 9:31 PM on August 14, 2014