[HELP]PHP Open / Close Tab

[WizCoder]

I was just wondering, there is just website where it has a "User panel" and it's in a <div> and your basically able to maximize the user panel and minimize it so it's like closed.


I'm not sure if my explanation about this was clear but if you know what I mean , could you leave a comment explaining how I would go about this.


From what I know I'm guessing it's made in JavaScript and I don't know JavaScript but as long as that's confirmed I'm sure I can go on about it some how.

Example: http://forum.ragezone.com/f690/web-aunoradev-presents-mapletales-cms-773528/
You can maximize and minimize the + and -.

Any tip on how it's done just leave a comment.

 

[EliteGM]

Quite easy with JavaScript. I'm nowhere near experienced in jQuery but it would probably be best to use that.

But for plain JavaScript, use;

<script type="text/javascript">
<!--
function toggleMenu(elemID)
{
    document.getElementByID(elemID).style.display = (document.getElementByID(elemID).style.display == "block" ? "none" : "block");
}
-->
</script>
<a href="#" onClick="toggleMenu('menu');">Show/Hide</a>
<div id="menu">
    <p>Menu links or w/e</p>
    <p>Menu links or w/e</p>
    <p>Menu links or w/e</p>
    <p>Menu links or w/e</p>
</div>

Optionally you could use visibility: visible/hidden; but that behaves a little different. Try it out with two different collapsing elements and see what happens.

 

[WizCoder]

Although your code snippet didn't really work for me, you did mention to try the visible function and that's what I search for.

<html>
<body>

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>
<a href="#" onclick="toggle_visibility('test');">Click here to toggle visibility of element #test</a>
<div id="test">This is the test</div>

</body>
</html>

Thanks for the help though >

 

[EliteGM]

Didn't test that, just wrote it off the top of my head You get the idea, that's what matters

 

[leenster]

Just use jquery toggle. Google it for examples.

Sent using Tapatalk

EDIT: Here is a link. http://api.jquery.com/toggle/

 

[Chris]

Quite easy with JavaScript. I'm nowhere near experienced in jQuery but it would probably be best to use that.

But for plain JavaScript, use;

<script type="text/javascript">
<!--
function toggleMenu(elemID)
{
    document.getElementByID(elemID).style.display = (document.getElementByID(elemID).style.display == "block" ? "none" : "block");
}
-->
</script>
<a href="#" onClick="toggleMenu('menu');">Show/Hide</a>
<div id="menu">
    <p>Menu links or w/e</p>
    <p>Menu links or w/e</p>
    <p>Menu links or w/e</p>
    <p>Menu links or w/e</p>
</div>

Optionally you could use visibility: visible/hidden; but that behaves a little different. Try it out with two different collapsing elements and see what happens.

Jquery makes it a bit simpler.

<script type="text/javascript">

$('#trigger').click(function() {
     $('#menu').toggle();
});

</script>

<a href="#" id="trigger">Show/Hide</a>
<div id="menu">
    <p>Menu links or w/e</p>
    <p>Menu links or w/e</p>
    <p>Menu links or w/e</p>
    <p>Menu links or w/e</p>
</div>