Javascript 3 way toggling

Question

I have created 2 buttons, each for toggling a heading, the other for toggling paragraphs.

The problem is that for Toggle Para button, switching happens between 2 paragraphs on 2 clicks. On the third click, I want both paragraphs to be visible, and so on.

I need a help here.

function toggle() {

  var x = document.getElementById("heading1");
  //var y = document.getElementById("p1");
  //var z = document.getElementById("p2");

  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function toggle1() {
  var y = document.getElementById("p1");
  var z = document.getElementById("p2");

  if (y.style.display == "block") {
    z.style.display = "block";
    y.style.display = "none";
  } else if (y.style.display == "none") {

    y.style.display = "block";
    z.style.display = "none";
  } else {
    y.style.display = "none";
    z.style.display = "block";
  }
}

<h1 id="heading1">Toggling with Paragraphs</h1>
<script type="text/javascript" src="toggle.js"></script>
<p id="p1"> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>

<p id="p2"> 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>

<input type="button" id="button1" value="Toggle H1" onclick="toggle()" />
<input type="button" id="button2" value="Toggle Para" onclick="toggle1()" />

Answer 1

Store the possible (display) states of your paragraphs, and step through them as appropriate.

function toggle()
{

    var x = document.getElementById("heading1");
    //var y = document.getElementById("p1");
    //var z = document.getElementById("p2");

    if (x.style.display == "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

var states = [[true,true], [true,false],[false,true]];
var currentState = 0;
function toggle1()
{
    var y = document.getElementById("p1");
    var z = document.getElementById("p2");

    currentState++
    if(currentState>=states.length) currentState = 0;
    
    y.style.display = states[currentState][0] ? 'block' : 'none';
    z.style.display = states[currentState][1] ? 'block' : 'none';
   
}

<h1 id="heading1">Toggling with Paragraphs</h1>
    <script type="text/javascript" src="toggle.js"></script>
    <p id="p1"> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>

    <p id="p2"> 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>

    <input type="button" id="button1" value="Toggle H1" onclick="toggle()"/>
    <input type="button" id="button2" value="Toggle Para" onclick="toggle1()"/>

Answer 2

So assuming you want to have three states:

1. p1 and p2 visible
2. p1 visible, p2 not
3. p2 visible, p1 not

The conditions for these states therefore depend on the current display state of both p1 and p2. Then you can use the following script: (in which you can of course change the order of making paragraphs (in)visible.)

function toggle()
{

    var x = document.getElementById("heading1");
    //var y = document.getElementById("p1");
    //var z = document.getElementById("p2");

    if (x.style.display == "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function toggle1()
{
    var y = document.getElementById("p1");
    var z = document.getElementById("p2");
   if (y.style.display != "none" && z.style.display != "none") {
        z.style.display = "block";
         y.style.display = "none";
    } 
    else if (y.style.display == "none" && z.style.display != "none") {

        y.style.display ="block";
        z.style.display = "none";
    }
    else {
        y.style.display ="block";
        z.style.display = "block";
    }
}

    <h1 id="heading1">Toggling with Paragraphs</h1>
    <script type="text/javascript" src="toggle.js"></script>
    <p id="p1"> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>

    <p id="p2"> 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>

    <input type="button" id="button1" value="Toggle H1" onclick="toggle()"/>
    <input type="button" id="button2" value="Toggle Para" onclick="toggle1()"/>