Javascript toggle state function

Question

I have two functions in my js file:

function all_opened()
{
    allToggle(true);
}   

function all_closed()
{
   allToggle(false);
}

I need both functions called in single function like function openclose()

And my HTML Code:

<a href="#" onclick="">Open/Close</a>    

Answer 1

Something like this:

//define some global js variable, for storing the state
var currentStateOpened = true;
function openclose() {
  //check if state is true or false
  if(currentStateOpened) {  //if state is open then close
     allToggle(false);
     currentStateOpened = false; // set the global state to false
  }
  else {
    allToggle(true);
    currentStateOpened = true; // set the global state to true
  }
}
//And
<a href="#" onclick="openclose(); return false;">Open/Close</a>

Answer 2

Here is a complete, cross-browser, and extensible option. Look at the comments in the code for the description. Feel free to use this in any projects you like.

CSS:

<style type="text/css">
a {
 text-decoration: none;
 outline: none;
}
div.TogWrap {
    width: 400px;
    padding: 12px;
}

/* classes .on and .off are for the links */
.off {
    border: 1px solid #bebebe;
    padding: 7px 8px;
    background: #df7623;
    color: #fff;
}
.on {
    border: 1px solid #bebebe;
    padding: 7px 8px;
    background: #bf7623;
    color: #fff;
}

/* classes .hide and .show are used for the content */
.hide {
    display: none;
}
.show {
    display: block;
    margin-top: 8px;
    border: 1px solid #bebebe;
    padding: 16px 10px 10px 10px;
    background: #ededed;
}
</style>

JavaScript:

<script type="text/javascript">
/* Cross-Browser Event functions (required) */
function addEvent (eventObj, event, codeToExecute) {
    if (eventObj.addEventListener) {
        eventObj.addEventListener(event, codeToExecute, false );
        return true;
    } else if (eventObj.attachEvent) {
        event = "on" + event;
        eventObj.attachEvent(event, codeToExecute);
    } else {
        eventObj['on' + event] = codeToExecute;
    }
}
function cancelEvent(event) {
    if (event.preventDefault) {
        event.preventDefault();
        event.stopPropagation();
    } else  {
        event.returnValue = false;
        event.cancelBubble = true;
    }
}


/* The function that does the hide/show */
function toggleIt (thisEl, thisContent) {
        var el = document.getElementById(thisEl);
        var content = document.getElementById(thisContent);
        content.className = "hide"; //initially hide the contents
        el.className = "off"; //and set the links class to off (optional)

        var toggle = function (event) { //capture the event that was triggered
                switch (event.type) { //check if it was a click event
                    case 'click': //if click
                        content.className = content.className === 'hide' ? 'show' : 'hide'; //self explanatory
                        el.className = content.className === 'hide' ? 'off' : 'on'; //self explanatory (optional)
                        break;
                }
                cancelEvent(event); //prevent the link from following the href attribute
            };

         addEvent (el, 'click', toggle); //onclick call the toggle function
    }


/* Set up function */
function initToggles () {

    //Array of IDs for the links that are clicked - add as many as you need
    var allTriggers = [
        'togTrigger1',
        'togTrigger2'
    ];

    //Array of IDs for the content that you want to hide/show - add as many as you need
    var allContents = [
        'content1',
        'content2'
    ];

    var i = 0,  arrLen = allTriggers.length;
    for (i; i < arrLen; i += 1) {
        toggleIt(allTriggers[i], allContents[i]);
    }
}

/*  the same as window.onload */
addEvent (window, 'load', initToggles);
</script>

HTML:

<!--You can add as many of these as you need. Just follow the same pattern as I have below -->
<div class="TogWrap">
    <a href="#" id="togTrigger1" class="">Open it / Close it</a>
    <p id ="content1" class="togContent">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna.
      Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada
      convallis, sagittis vitae, convallis sit amet, lectus.
    </p>
</div>

<p>&nbsp;</p>

<!--Here is another one following the same pattern-->
<div class="TogWrap">
    <a href="#"  id="togTrigger2" class="">Open it / Close it</a>
    <p  id ="content2" class="togContent">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna.
      Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada
      convallis, sagittis vitae, convallis sit amet, lectus.
    </p>
</div>

I hope it helps! :)

Answer 3

You can store the flag which stores your boolean value in the code and check in it the function itself:

flag = false;

function allToggle(){
 flag = !flag ? false : true;
 //rest of the code 
}