• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 790
  • Last Modified:

help onclick show/hide div & move icon to new div


I am a newbie to javascript and need some help. What I would like to have is this...
I am going to have 2 divs, one displayed and one hidden. I am attaching images so that you can get view of layout and what I am talking about. Within the divs there will a table of 4x4. In the bottom of the 1st div there will be an image (+ icon) and "Add another child" text,  upon clicking on this will then display the hidden div which also moves the (+ icon) and "Add another child" text to the newly shown div. I am newbie to javascript so any code or examples that could be provided would be most appreciated.

Thank You
  • 3
  • 2
1 Solution
basically you will want to create new elements every time the add child is pressed. You will want to make sure you are giving each new element a unique id number. For example id="normal_label_1" normal_code_1, then normal_label_2 normal_code_2 etc etc

Also you will need to call a javascript function from the add child button to create the new child on the fly.

this tutorial I wrote a long time ago goes over some of this stuff:

the code to create new elements is similar to this (this is not working code just look at it to get the jist of what you will need to do):
// create a new div
    newchild_id = "child_" + (**current number of cildren goes here** + 1);
    new_child = document.createElement('div');
    // give it some style
    // give it some text
    new_child.appendChild(document.createTextNode('Loading Data, please wait\u2026'));
    // append it to the body

Open in new window

PdesignzAuthor Commented:
Your tutorial has to do more with calculations than moving the icon from one div to another... I looked at the code you provided, but do not really understand it as am newbie to writing javascript.

1st - I have not mentioned anything about moving the add child button down on the page because if you are inserting a new div in between the first table and the add child button, it should automatically be forced downward.

As far as the tutorial goes, the point is that you will need the javascript pieces that will create elements on the fly. The 2nd part of the tutorial is a very simple example of how an element is created "out of thin air". You see how the "loading data" screen appears suddenly? That div did not exist, it was created with javascript at runtime, and then it is removed from the page shortly after.

each time you click add new child you will need to create a new set of elements using javascript, and so you will need to know how that works. The calculations have nothing to do with that  - we are only concerned with the javascript portion not the math which is done by the php file. Focus on that loading screen only.

Here is a more simple example of the kind of javascript you will need to use to create elements using javascript:

  <script language='javascript'>
    function addRow(a,b) {
      var r  = document.createElement('tr');
      var ca = document.createElement('td');
      var cb = document.createElement('td');
      var ta = document.createTextNode(a);
      var tb = document.createTextNode(b);
      var t  = document.getElementById('tbl');
      Column A: <input type=text name=a>
  <br>Column B: <input type=text name=b>
  <br><input type=button value='add Row' onClick='javascript:addRow(a.value, b.value)'>
   <table id=tbl>
     <tr><td>Column A</td><td>Column B</td></tr>

Open in new window

PdesignzAuthor Commented:
OK, I see that you were able to add a row to a/b that was not there when you click add a row. Very cool! What would be the next step that I would need to do. I am a newbie so do not know how to write the javascript code...

PdesignzAuthor Commented:
Thanks for trying, I figured out another way to solve what I wanted done!

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now