Change DIV's with JavaScript Options

[Terminator]

The page will have 3 buttons, when you click each button it will display 3 new DIV's. So clicking Button #1 will display DIV's 1a, 1b, and 1c. Then when you click Button #2 is changes display to show 3 new DIV's, 2a, 2b, and 2c. Then Button #3 does same thing with 3 new DIV's.

Button #1 - Button #2 - Button #3

DIV #1a - DIV #1b - DIV #1c

I'm not really sure how to get started on this though, I cant really find any good examples online. Any ideas? My web programming instructor does not appear to have any advanced JavaScript knowledge, and since this is not covered in the textbook she cant help me.

I think the buttons are supposed to be coded like this:

CODE

<button class="button" onclick="myFunction()">Button #1</button>

I cant use any JQuery, and the assignment does not require this, I just want to learn it.

This post has been edited by Terminator: Nov 24 2015, 07:45 PM

[CharlesEF]

Your button code looks good but what about the javascript? You would use 'display=none;' to hide and 'display=block;' to show each DIV. You could have 3 main DIV's, one, two and three. Inside each DIV you would have 3 sub-DIV's, one_a, two_a and three_a, and so on. Then you only need to show/hide the main DIV to get the sub-DIV's to show/hide. Or, you could just use 9 DIV's and forget about the main DIV's. The javascript would be different but both methods would work.

If you have any trouble with the javascript then post back.

[Terminator]

I am just now learning JavaScript so I am doing this step by step, and I have to teach myself. The best way for me to learn is by reverse engineering. If it is already done I can learn off that, and then make changes.

I've already made an awesome Responsive Feedback Form and Login Form by looking at examples online, but I cant find any complete examples of what I want to do with this JavaScript DIV display, so I am not sure how to go about the JavaScript part.

The 3 main DIV's which contain the 3 sub DIV's (DIV #1a - DIV #1b - DIV #1c), that is a great idea and was also how I was thinking of doing it. I would have to give these 3 main DIV's a separate ID name correct?

I am just having a hard time getting the JavaScript part started for this. We are not learning correct JavaScript in class at all, last class ended an hour early because instructor said she was tired and had enough.

Would it be something like this?

CODE

var div1;
var div2;
var div3;

function myFunction() {
    document.getElementById("demo").innerHTML = "div1";
}

My Web Programming Instructor is no help at all on any of this. If it is not in the textbook, she does not know it, including anything about Responsive Design. For class I am only making high quality, full Responsive sites, with current coding methods so I can use some of these to show to potential employers as part of a Portfolio.

Thanks for your help, I know I can learn this, I did with HTML and CSS, I just need to be pointed in right direction.

This post has been edited by Terminator: Nov 24 2015, 08:46 PM

[pandy]

I'd go with display as CharlesEF said.

This is very step by step and easy to follow, I hope.

CODE

function init()
{
   document.getElementById('div1').style.display = 'none';
   document.getElementById('div2').style.display = 'none';
   document.getElementById('div3').style.display = 'none';
}

function showDiv(a)
{
   document.getElementById(a).style.display = 'block';
}

window.onload = init;

HTML

<div id="div1">
DIV 1
</div>
<div id="div2">
DIV 2
</div>
<div id="div3">
DIV 3
</div>

<button onclick="showDiv('div1')">Button 1</button>
<button onclick="showDiv('div2')">Button 2</button>
<button onclick="showDiv('div3')">Button 3</button>

The init function hides the DIVs and is called onload (last line). That's just good form. If you hide them directly with CSS they will remain hidden for someone who has CSS but not JS available.

The 'a' thing in showDiv(a) acts as kind of a place holder. (I never remember what this i called!). Its a little like a variable. It holds the value in the parenthesis in the function call and spits it out when it's used inside the function. So it means div1, div2 or div3 depending on which button is clicked. You can name it what you want, it doesn't need to be 'a'.

If you want to be able to toggle the DIVs on and off you need more this, but it does what you say you want now and you can build on it later if you want. I'm a strong believer in starting with the simple case.

[CharlesEF]

I took pandy's example and expanded on it. I 'assumed' you wanted to hide any DIV previously shown but that can be changed if you want.
 show_hide.html ( 1.17k ) Number of downloads: 526

[Terminator]

******EDIT****

Charles it looks like we responded around same time, thank you for typing that code, I will test it right now

This post has been edited by Terminator: Nov 24 2015, 10:28 PM

[Terminator]

ok I added Charles changes to my existing HTML and it works perfect. Thanks to both of you, I will save and study both of your coding from this.

I am def learning a lot more off this site then in class, thanks.

[pandy]

Thanks a lot guys, this works with displaying the blocks but now I need to toggle them when you click the buttons. So when you click button 2 it only displays DIV 2, because with this code it puts the button 2 content below the button 1 content instead of replacing it.

I basically need to start over when I click a new button, remove all the DIV content from previous button, and only display the current button's DIV content.

That's what you get for not describing the whole problem.

It's also as much as a temporarily one handed person can be expected to type.

[CharlesEF]

Thanks a lot guys, this works with displaying the blocks but now I need to toggle them when you click the buttons. So when you click button 2 it only displays DIV 2, because with this code it puts the button 2 content below the button 1 content instead of replacing it.

I basically need to start over when I click a new button, remove all the DIV content from previous button, and only display the current button's DIV content.

That's what you get for not describing the whole problem.

It's also as much as a temporarily one handed person can be expected to type.

My code does what was wanted. I guess your quoted part was removed because I don't see it at all.

[CharlesEF]

ok I added Charles changes to my existing HTML and it works perfect. Thanks to both of you, I will save and study both of your coding from this.

I am def learning a lot more off this site then in class, thanks.

If you have any questions about the javascript code, just ask.

[pandy]

My code does what was wanted. I guess your quoted part was removed because I don't see it at all.

I know. Mine was what he asked for.

I quoted before Terminator edited his post (next last, it says ***EDIT*** now), but I got sidetracked by the telly so he had time to post yet another one before I posted it. My post was re Terminator's original post.

[Terminator]

Charles code was the way i did want it originally. I wasnt as clear on that in 1st post but he guessed correctly

[Terminator]

I took pandy's example and expanded on it. I 'assumed' you wanted to hide any DIV previously shown but that can be changed if you want.
 show_hide.html ( 1.17k ) Number of downloads: 526

Hey Charles, based off your code in this file, is it possible to show DIV1 automatically on the page by default without having to press the button first to display it, and then have it get replaced by the other DIV's when pressing the buttons? But then the default DIV1 would need to be brought back to display when pressing button 1.

[CharlesEF]

Hey Charles, based off your code in this file, is it possible to show DIV1 automatically on the page by default without having to press the button first to display it, and then have it get replaced by the other DIV's when pressing the buttons? But then the default DIV1 would need to be brought back to display when pressing button 1.

Sure, just change the init() function to this:

CODE

function init()
{
  document.getElementById('div2').style.display = 'none';
  document.getElementById('div3').style.display = 'none';
}

[Terminator]

Now that was easy, thanks.