I want to achieve 2 things with my code

1. When I click on the link with id='show-list-form' I want to hide the link and show the form (with id='add-list-item').

2. When the form appears, I want to be able to click on the close button and hide the form and show the link.

3. The link tag has 2 span items (1. Add a list and 2. Add another list) with the class 'placeholder', I want to be able to one of the two depending on if a list is added or not.

I figure point 3 should have some count item to see if there are any list being displayed and show (Add a list if count = 0 or Add another list if count = to 1 or more, however, I'm just not sure how to achieve this. The code below is what I have so far. Your help will be much appreciated.

function toggle_visibility(divId1, divId2){
	if(document.getElementById(divId1).style.display == 'block'){
    document.getElementById(divId1).style.display = 'none';
    document.getElementById(divId2).style.display = 'block';
	}else{	
	  document.getElementById(divId2).style.display = 'none';
	  document.getElementById(divId1).style.display = 'block'
	}
} 

<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
      <span class="placehoder-link"><i class="fas fa-plus"></i> Add a list</span>
      <span class="placehoder-link"><i class="fas fa-plus"></i> Add another list</span>
      </a>
      <form id="add-list-form">
        <div class="form-inner-container">
        <input type="text" id="list-name" placeholder="Enter list title..." autoplete="off">
        <input type="submit" value="Add List">
        <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input>
        </div>
      </form>

I want to achieve 2 things with my code

1. When I click on the link with id='show-list-form' I want to hide the link and show the form (with id='add-list-item').

2. When the form appears, I want to be able to click on the close button and hide the form and show the link.

3. The link tag has 2 span items (1. Add a list and 2. Add another list) with the class 'placeholder', I want to be able to one of the two depending on if a list is added or not.

I figure point 3 should have some count item to see if there are any list being displayed and show (Add a list if count = 0 or Add another list if count = to 1 or more, however, I'm just not sure how to achieve this. The code below is what I have so far. Your help will be much appreciated.

function toggle_visibility(divId1, divId2){
	if(document.getElementById(divId1).style.display == 'block'){
    document.getElementById(divId1).style.display = 'none';
    document.getElementById(divId2).style.display = 'block';
	}else{	
	  document.getElementById(divId2).style.display = 'none';
	  document.getElementById(divId1).style.display = 'block'
	}
} 

<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
      <span class="placehoder-link"><i class="fas fa-plus"></i> Add a list</span>
      <span class="placehoder-link"><i class="fas fa-plus"></i> Add another list</span>
      </a>
      <form id="add-list-form">
        <div class="form-inner-container">
        <input type="text" id="list-name" placeholder="Enter list title..." autoplete="off">
        <input type="submit" value="Add List">
        <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input>
        </div>
      </form>

• javascript
• html

3 Answers 3

Here, use EventListener and toggle that way.

// Set up click events
var showList = document.getElementById("show-list-form");
var hideList = document.getElementById("closeForm");
var formElement = document.getElementById("add-list-form");

const toggle = (hide, show) => {
  hide.style.display = 'none';
  show.style.display = 'block';
};

showList.addEventListener("click", function(event) {
  toggle(showList, formElement);
});

hideList.addEventListener('click', function(event) {
  toggle(formElement, showList);
});

// Init
toggle(formElement, showList);

<a href="#" id="show-list-form">
  <span class="placehoder-link"><i class="fas fa-plus"></i> Add a list</span>
  <span class="placehoder-link"><i class="fas fa-plus"></i> Add another list</span>
</a>
<form id="add-list-form">
  <div class="form-inner-container">
    <input type="text" id="list-name" placeholder="Enter list title..." autoplete="off">
    <input type="submit" value="Add List">
    <input id="closeForm" type="button"><i class="fas fa-times"></i></input>
  </div>
</form>

You didn't change the onclicks to match your function. Also on load, you need to display:none your form.

function toggle_visibility(divId1, divId2){
	if(document.getElementById(divId1).style.display == 'block'){
    document.getElementById(divId1).style.display = 'none';
    document.getElementById(divId2).style.display = 'block';
	}else{	
	  document.getElementById(divId2).style.display = 'none';
	  document.getElementById(divId1).style.display = 'block'
	}
} 

<a href="#" id="show-list-form" onclick="toggle_visibility('add-list-form', 'show-list-form');">
      <span class="placehoder-link"><i class="fas fa-plus"></i> Add a list</span>
      <span class="placehoder-link"><i class="fas fa-plus"></i> Add another list</span>
      </a>
      <form id="add-list-form"  style="display: none;">
        <div class="form-inner-container">
        <input type="text" id="list-name" placeholder="Enter list title..." autoplete="off">
        <input type="submit" value="Add List">
        <input type="button" onclick="toggle_visibility('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input>
        </div>
      </form>

The toggle works but the function call needs to be changed. In the solution below, I changed the name of the function to toggleDiv() and now it executes when called.

var d = document;
d.g   = d.getElementById;

spans = d.getElementsByTagName("span");
window.onload = function(){
   spans[1].style.display='none';
   d.forms[0].style.display='none';
};

var clicked = 0;

function toggleDiv(divId1, divId2){
    clicked++;
    
    if( d.g( divId1 ).style.display == 'block'){
        d.g( divId1 ).style.display = 'none';
        d.g( divId2 ).style.display = 'block';
    }
    else
    {	
        d.g( divId2 ).style.display = 'none';
        d.g( divId1 ).style.display = 'block'
    }

    if ( clicked > 0) {
       spans[0].style.display='none';
       spans[1].style.display='block';
    }
}

<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">         
<span class="placehoder-link"><i class="fas fa-plus">Add a list</i></span>
      <span class="placehoder-link"><i class="fas fa-plus">Add another list</span></i></a>
      <form id="add-list-form">
        <div class="form-inner-container">
        <input type="text" id="list-name" placeholder="Enter list title..." autoplete="off" onmouseover="this.focus()" onmouseout="this.blur()">
        <input type="submit" value="Add List">
        <input type="button" style="font-style: italic" onclick="toggleDiv('add-list-form', 'show-list-form')" value="Close">
        </div>
      </form>

Note: one line of HTML:

<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input>

should be amended as follows:

<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');">

No reason to use i tags with an input button and the input tag does not need a closing tag. If you must have italics, you could style the button and indicate an italic font. Since this is a Close button, you should probably indicate that in the value attribute.

Also, the two span tags had superfluous i tags, so the code wraps them around the linked text values.

The code uses a static clicked variable to control display of the content of the a tag with JavaScript.