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

Posted on 2009-04-29
Last Modified: 2012-05-06

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
Question by:Pdesignz
    LVL 5

    Expert Comment

    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


    Author Comment

    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.

    LVL 5

    Accepted Solution

    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


    Author Comment

    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...


    Author Closing Comment

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Java/J2EE and SOA

    This course will cover both core and advanced Java concepts like Database connectivity, Threads, Exception Handling, Collections, JSP, Servlets, XMLHandling, and more. You'll also learn various Java frameworks like Hibernate and Spring.

    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now