0

Lately I've been trying to watch/study javascript and got interested in this certain program since I know I'll be able to use it a lot in the future.

I've seen a tutorial on youtube on how to "hide/show" a div so I tweaked it and made it "show/hide" div's and added two more div's. My problem is I wanted to hide other open div's when I want to show a specific one since my code now shows all of the div's regardless of the present ones.

<html>

<head>

  <style type="text/css">
    #hide_add_fname {
      padding: 20px;
      background: #f0f0f0;
      width: 200px;
      display: none;
    }
    #hide_edit_fname {
      padding: 20px;
      background: #f0f0f0;
      width: 200px;
      display: none;
    }
    #hide_delete_fname {
      padding: 20px;
      background: #f0f0f0;
      width: 200px;
      display: none;
    }
  </style>

  <script type="text/javascript">
    function toggle_add_fname(id) {

      var divelement = document.getElementById(id);

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

    function toggle_edit_fname(id) {

      var divelement = document.getElementById(id);

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

    function toggle_delete_fname(id) {

      var divelement = document.getElementById(id);

      if (divelement.style.display == 'block')
        divelement.style.display = 'none';
      else
        divelement.style.display = 'block';
    }
  </script>

</head>

<body>

  <table border='1'>
    <tr>
      <td colspan='3'>
        <center>First Name</center>
      </td>
    </tr>
    <td>
      <button onclick="toggle_add_fname('hide_add_fname');">Add</button>
    </td>
    <td>
      <button onclick="toggle_edit_fname('hide_edit_fname');">Edit</button>
    </td>
    <td>
      <button onclick="toggle_delete_fname('hide_delete_fname');">Delete</button>
    </td>
    </tr>
  </table>

  <div id="hide_add_fname">
    <form method='POST'>
      <center>Add First Name:</center>
      <br>
      <center>
        <input type='text'></input>
      </center>
      <br>
      <center>
        <input type='submit' value='Add'>
      </center>
    </form>
  </div>

  <div id="hide_edit_fname">
    <form method='POST'>
      <center>Edit First Name:</center>
      <br>
      <center>
        <input type='text'></input>
      </center>
      <br>
      <center>
        <input type='submit' value='Edit'>
      </center>
    </form>
  </div>

  <div id="hide_delete_fname">
    <form method='POST'>
      <center>Delete First Name:</center>
      <br>
      <center>
        <input type='text'></input>
      </center>
      <br>
      <center>
        <input type='submit' value='Delete'>
      </center>
    </form>
  </div>

</body>

</html>
nempoBu4
  • 6,521
  • 8
  • 35
  • 40
Carl Dun
  • 225
  • 4
  • 13

3 Answers3

3

try this code 

  <html>

<head>

  <style type="text/css">
    #hide_add_fname {
      padding: 20px;
      background: #f0f0f0;
      width: 200px;
      display: none;
    }
    #hide_edit_fname {
      padding: 20px;
      background: #f0f0f0;
      width: 200px;
      display: none;
    }
    #hide_delete_fname {
      padding: 20px;
      background: #f0f0f0;
      width: 200px;
      display: none;
    }
  </style>

  <script type="text/javascript">
    function toggle_add_fname(id) {

      var divelement = document.getElementById(id);

      if (divelement.style.display == 'block')
        divelement.style.display = 'none';  

      else{
        divelement.style.display = 'block';
        document.getElementById('hide_edit_fname').style.display='none';
        document.getElementById('hide_delete_fname').style.display='none';
        }
    }


    function toggle_edit_fname(id) {

      var divelement = document.getElementById(id);

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

        divelement.style.display = 'block';
        document.getElementById('hide_add_fname').style.display='none';
        document.getElementById('hide_delete_fname').style.display='none';

        }


    }

    function toggle_delete_fname(id) {

      var divelement = document.getElementById(id);
      if (divelement.style.display == 'block')    
        divelement.style.display = 'none';
      else{
        divelement.style.display = 'block';
        document.getElementById('hide_add_fname').style.display='none';
        document.getElementById('hide_edit_fname').style.display='none';
        }
    }
  </script>

</head>

<body>

  <table border='1'>
    <tr>
      <td colspan='3'>
        <center>First Name</center>
      </td>
    </tr>
    <td>
      <button onclick="toggle_add_fname('hide_add_fname');">Add</button>
    </td>
    <td>
      <button onclick="toggle_edit_fname('hide_edit_fname');">Edit</button>
    </td>
    <td>
      <button onclick="toggle_delete_fname('hide_delete_fname');">Delete</button>
    </td>
    </tr>
  </table>

  <div id="hide_add_fname">
    <form method='POST'>
      <center>Add First Name:</center>
      <br>
      <center>
        <input type='text'></input>
      </center>
      <br>
      <center>
        <input type='submit' value='Add'>
      </center>
    </form>
  </div>

  <div id="hide_edit_fname">
    <form method='POST'>
      <center>Edit First Name:</center>
      <br>
      <center>
        <input type='text'></input>
      </center>
      <br>
      <center>
        <input type='submit' value='Edit'>
      </center>
    </form>
  </div>

  <div id="hide_delete_fname">
    <form method='POST'>
      <center>Delete First Name:</center>
      <br>
      <center>
        <input type='text'></input>
      </center>
      <br>
      <center>
        <input type='submit' value='Delete'>
      </center>
    </form>
  </div>

</body>

</html>
Kishan
  • 1,182
  • 12
  • 26
2

I would use jquery for this. Since it'll take roughly few lines of code to achieve something like this. But anyways, here's what you could do.

Add a class called divs to all of your divs. And paste this code at the beginning of each of toggle functions.

var myElements = document.querySelectorAll(".divs");

for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.display = 'none';
}

You could have the above code in a function and run it at the beginning of your toggle functions, and I recommend you to do this to keep your code cleaner.

Anyways, what I am doing here is hiding every div at the beginning regardless of what was clicked. And then your code will just show the div that needs to be shown. I am not really good at javascript for DOM manipulation. Javascript experts correct me if I am wrong.

EDIT: I missed the fact that you want to toggle it as well. Here's the updated code.

function hidedivs(){
     var myElements = document.querySelectorAll(".divs");

     for (var i = 0; i < myElements.length; i++) {

        myElements[i].style.display = 'none';
     }
  }
  function toggle_add_fname(id) {
     var divelement = document.getElementById(id);
     if(divelement.style.display == 'none'){
        hidedivs();
     }

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

  function toggle_edit_fname(id) {
     var divelement = document.getElementById(id);
     if(divelement.style.display == 'none'){
        hidedivs();
     }

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

  function toggle_delete_fname(id) {
     var divelement = document.getElementById(id);
     if(divelement.style.display == 'none'){
        hidedivs();
     }
     if(divelement.style.display == 'block')
        divelement.style.display = 'none';
     else
        divelement.style.display = 'block';
  }
Jason
  • 698
  • 4
  • 12
1

When you need to use the same specific selector more than once, classes are a better choice.

<div id="hide_add_fname" class='fname'>

A flexible way to apply style

    var element_list = document.getElementsByClassName(class_name);
    for (var i = 0; i < element_list.length; i++) {
        element_list[i].style.display = 'none';
    }

JSFiddle example

http://jsfiddle.net/83yrf4tx/

More information about IDs and Classes

In CSS what is the difference between "." and "#" when declaring a set of styles?

Community
  • 1
  • 1
Parfait
  • 1,752
  • 1
  • 11
  • 12