Javascript onclick display/hide div elements

Question

I am new to javascript and I need some help. I am developing a website in which i am having a buttton nemed "Add treatment notes".

1.If i click the "Add treatment notes" the corresponding two <div> should open and if the <div> is in open condition "Add treatment notes" button should change the text to "Hide treatment notes".

  <div id="divpopup"><button>Add treatment notes</button></div> 

2.If "Hide treatment notes" is clicked,the two div's data should be in hidden.

<td class="ir-shade4" colspan="2">
    <div id=irid1><p><em>If injured,mark location</em></p>
    <img src="{{ STATIC_URL }}images/spotmarker.jpeg"/></div>
 </td>
 <td class="ir-shade3" colspan="2">
  <div id=irid2><p>Actions</p>
   <p><input id="ir-box" type="checkbox"/>01.Allowed to rest and returned to class</p>
   <p><input id="ir-box" type="checkbox"/>02.Contacted parents/guardians</p>
   <p><strong><em>Treatment given,or other notes</em></strong></p>
   <textarea class="textarea" name="description"></textarea>
   <p><input id="ir-box2" type="checkbox"/>No furthur action needed</p>
   </div>
   </td>

EDIT:

$(document).ready(function () {
  $("#divpopup").css("display", "none");
});

function addtreatment() {
  var hideValue = $("#irid1").val();
  var hideValue = $("#irid2").val();
  var newHideValue = 0;
    if (hideValue == 0) {
      newHideValue = 1;
      }
      else 
      {
        newHideValue = 0;
      }
    if (newHideValue == 0) {
      $("#divpopup").css("display", "none");
    }
    else 
    {
      $("#divpopup").css("display", "block");
    }
    $("#irid1").val(newHideValue);
    $("#irid2").val(newHideValue);

    return false;
  }

Please tell me how to implement this in my page.

Thanks

Answer 1

Since you tagged your question with jQuery , you might want to look into jQuery's toggle() , show() , hide() , text() and click functions. That might get you started. When you have some code to share, feel free to come back and ask more detailed questions.

Answer 2

You could use this

$('#divpopup').click(function()
 {
   $('.ir-shade4').toggle();
   $('.ir-shade3').toggle();
}

then use $('#divpopup').text('Hide treatment notes');

I will leave it for an exercise for yourself to put in an if statemetn to check what you should set the text to

Answer 3

Give button a id lets say

<button id="test">Add treatment notes</button>

Then

$(document).ready(function(){

$("#test").click(function(){
    $("#irid1").toggle();
    $("#irid2").toggle();
    if ($("#irid1").is(":visible")) {
        $("#test").html('Hide treatment notes');
    } else {
        $("#test").html('Show treatment notes');
    }
});
});