unload a page at first and reload later

Question

Pls I need someone to help me out on the code below: Here is what I want to achieve. When the page loads, It should only show the link view avaliable wards.When the user clicks that link, then It should load the php file(' ward_availability.php'). Also, the intial javascript should aditional function of hide/show the ward_availability.php when toggles.

For now, it loads upon opening the page, so how do I unload, then user click, then load and when user clicks again, it hides.Pls assist.

<script type="text/javascript">
     function toggleVisible(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
    </script>

           <script type="text/javascript">
           $(document).ready(function(e) {
            $('#wardAv').load('ward_availability.php');
             });

           </script>

           <a href="#" target="_top" onclick="toggleVisible('wardAv')">View Available Ward</a> 

           <div id="wardAv">
            Ward will be loaded here
           </div>

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

I would recommend searching for answers before submitting a new post, we call this research.

Loading external pages into a div Stackoverflow: How to load external html into a div?

Toggle element Stackoverflow: toggle show/hide div with button?

edited May 23 '17 at 12:05

Community

1
1

answered Feb 09 '15 at 12:42

NewToJS

2,762
3
14
22

score 0 · Accepted Answer · answered Feb 09 '15 at 12:44

Assuming you're using jQuery from the "load()" method you're using and the tags included in your question, I've come up with the following code:

<script type="text/javascript">
    $(document).ready(function(e) {
        $wardAv = $("#wardAv");

        $('.toggle-wardAv').on("click", function(event) {
            event.preventDefault();

            if ($wardAv.text() == "") {
                $wardAv.load('ward_availability.php');
            }

            $wardAv.toggle();
        });
    });
</script>

<a class="toggle-wardAv" href="#" target="_top">View Available Ward</a> 

<div id="wardAv" style="display:none"></div>

Best regards, Stefan

unload a page at first and reload later

2 Answers2