How can I add a show/hide button for "who is online?" section?

Rideem3 wrote:Do you want to automatically hide it, and then have a button to show it?

Or do you want to show it a add a button that will hide it?

Automatically hide it, and then have a button to show it.

This:

Code:


<script type="text/javascript">
  function showstats() {
  $(document).ready(function() {
  $('.hiddenstat').show('slow');
  });
  document.getElementById('showS').style.display = "none";
  document.getElementById('hideS').style.display = "inline-block";
  }
 
  function hidestats() {
  $(document).ready(function() {
  $('.hiddenstat').hide('slow');
  });
  document.getElementById('showS').style.display = "inline-block";
  document.getElementById('hideS').style.display = "none";
  }
</script>


Can be shortened to this:

Code:


<script type="text/javascript">
function togglestats() {
  var x=document.getElementById('showS').style.display = "none";
  if (x.style.display!='none') {
    $('.hiddenstat').show('slow');
    x.style.display = "none";
    document.getElementById('hideS').style.display = "inline-block";
 } else {
    $('.hiddenstat').hide('slow');
    x.style.display = "inline-block";
    document.getElementById('hideS').style.display = "none";
}
</script>


Which would mean changing this:

Code:


<input type="button" value="Show Statistics" onclick="showstats()" id="showS"/><input style="display: none;" type="button" value="Hide Statistics" onclick="hidestats()" id="hideS" /></span>
      <!-- END switch_viewonline_link -->


to this:

Code:


<input type="button" value="Show Statistics" onclick="togglestats()" id="showS"/><input style="display: none;" type="button" value="Hide Statistics" onclick="togglestats()" id="hideS" /></span>
      <!-- END switch_viewonline_link -->


less code = better
A toggling function is better than having two seperate function. Also, you don't need to start a jQuery function within a Javascript function as this function does not require the DOM to be loaded. (well it does, but it will only execute on click ... so it doesn't)

This is what it shows:


This is what it shows when I click the button:


All it does is change the text of the button.

The second code LGForum gave me doesn't do anything and it takes away the who is online? text.


I like the first code better but its not working 100%, but i will use either one if it show the who is online? text

iamthestreets wrote:This is what it shows:

The second code LGForum gave me doesn't do anything and it takes away the who is online?

Lol woops. Thats because there was a slight silly error in it. It should have been this:

Code:


       
        <script type="text/javascript">
        function togglestats() {
          var x=document.getElementById('showS');
          if (x.style.display!='none') {
            $('.hiddenstat').show('slow');
            x.style.display = "none";
            document.getElementById('hideS').style.display = "inline-block";
        } else {
            $('.hiddenstat').hide('slow');
            x.style.display = "inline-block";
            document.getElementById('hideS').style.display = "none";
        }}
        </script>


EDIT: this code above now works perfectly.

Rideem3 wrote:Actually, the reason why it's displaying the birthday is because it's displayed as a PHP variable. For some reason I can't give it the class I gave the others.

That I don't mind showing, but when i click the button to show statistics it does nothing.
(if you could hide the birthday info that would be cool too)

LGforum wrote:

iamthestreets wrote:This is what it shows:

The second code LGForum gave me doesn't do anything and it takes away the who is online?

Lol woops. Thats because there was a slight silly error in it. It should have been this:

Code:


       
        <script type="text/javascript">
        function togglestats() {
          var x=document.getElementById('showS');
          if (x.style.display!='none') {
            $('.hiddenstat').show('slow');
            x.style.display = "none";
            document.getElementById('hideS').style.display = "inline-block";
        } else {
            $('.hiddenstat').hide('slow');
            x.style.display = "inline-block";
            document.getElementById('hideS').style.display = "none";
        }}
        </script>


EDIT: this code above now works perfectly.

Thanks it worked, but is there any way to put the "Who is Online?" text back?

This it what it shows as now:


Can it show like this:


And is there any way possible to remove the birthday info?

You can remove the birthday info by adding this in the CSS:

Code:


.hiddenstat+tr{display:none;}


To toggle it with the rest of the stuff add this to the script:

Code:


$( $('.hiddenstat')[1].nextSibling ).toggle();


underneath where it says:
function togglestat() {

iamthestreets wrote:

LGforum wrote:

iamthestreets wrote:This is what it shows:

The second code LGForum gave me doesn't do anything and it takes away the who is online?

Lol woops. Thats because there was a slight silly error in it. It should have been this:

Code:


       
        <script type="text/javascript">
        function togglestats() {
          var x=document.getElementById('showS');
          if (x.style.display!='none') {
            $('.hiddenstat').show('slow');
            x.style.display = "none";
            document.getElementById('hideS').style.display = "inline-block";
        } else {
            $('.hiddenstat').hide('slow');
            x.style.display = "inline-block";
            document.getElementById('hideS').style.display = "none";
        }}
        </script>


EDIT: this code above now works perfectly.

Thanks it worked, but is there any way to put the "Who is Online?" text back?

This it what it shows as now:


Can it show like this:


And is there any way possible to remove the birthday info?

I figured this out.

LGforum wrote:You can remove the birthday info by adding this in the CSS:

Code:


.hiddenstat+tr{display:none;}


Perfect! Thanks! You guys are awesome and thanks for the quick responses.