Add div on click, then toggle it on every click after that

Question

1. I'm trying to click add and the content of add will appear for the first time.

2. After it's added, I want to click add and it will only toggle "added", instead of adding "added" on each click

Jquery:

$(function(){
    var NewContent='<div class="added">Added</div>'
    $(".add").click(function(){
        $("#spin").after(NewContent);
    });
});

HTML:

<span class="add">add</span>
<span id="spin"></span>

Here's a Fiddle: http://jsfiddle.net/Abgec/

Answer 1

$(function(){

    //start with `NewContent` being the HTML to add to the page
    var NewContent='<div class="added">Added</div>'
    $(".add").click(function(){

        //check if `NewContent` is empty or not
        if (NewContent != '') {

            //if `NewContent` is not empty then add it to the DOM
            $("#spin").after(NewContent);

            //now that `NewContent` has been added to the DOM, reset it's value to an empty string so this doesn't happen again
            NewContent = '';
        } else {

            //this is not the first click, so just toggle the appearance of the element that has already been added to the DOM
            //since we injected the element just after the `#spin` element we can select it relatively to that element by using `.next()`
            $('#spin').next().toggle();
        }
    });
});

Here is a demo: http://jsfiddle.net/7yU3n/

Docs for .toggle(): http://api.jquery.com/toggle/

Answer 2

I little different approach, replacing the click event after its first firing,

$(function(){
    var NewContent='<div class="added">Added</div>'
    $(".add").one('click', function(){
        var $content = $(NewContent).insertAfter('#spin');
        $(this).click(function(){
            $content.toggle();
        });
    });
});

http://jsfiddle.net/Abgec/3/

Answer 3

There may be a more elegant way, but this works.

$(function(){
    var NewContent='<div class="added">Added</div>'
    $(".add").click(function(){
        var added= $(".added");
        if (added.length) {
            added.toggle();
        } else {
            $("#spin").after(NewContent);
        }
    });
});

Fiddle: http://jsfiddle.net/HVSm3/

edit: when I wrote this there were no answers I swear

Answer 4

I tried many answers but I couldn't find the same what i looking for, but some answers helped me to achieved my goal. So i'm sharing what I done, may be it could help someone who wants to complete working code ..

*** click on "item" to toggle

var newItemCounter = 1;
var ourList = document.getElementById("our-list");
var ourButton = document.getElementById("our-button");

ourList.addEventListener("click", activateItem);

function activateItem(e){
        $(e.target).children("p").toggle(400);
}

ourButton.addEventListener("click", createNewItem)

function createNewItem(){
        ourList.innerHTML+= "<input class='fl-right' type='text'>&nbsp;&nbsp;<input class='fl-right' type='text'><div class='fl-right'>item " + newItemCounter +"<br><p><input type='text'> <input type='text'><br><br><input type='text'> <input type='text'></p><br></div>";
        newItemCounter++;
}

 div p{
  display: none;
  }
  #our-list ul.child-list li{
  float: left;
  }
  .fl-right{
        display: inline;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="our-list">
  <input class='fl-right' type='text'>
  <input class='fl-right' type='text'>
  <div class='fl-right'> item<br>
  <p><input type='text'>&nbsp;&nbsp;<input type='text'><br><br><input type='text'>&nbsp;&nbsp;<input type='text'></p><br>
  </div>
  </div><br><br>
   <button id="our-button"> Add new item</button>

still you have to clean this code, i put rough code

Answer 5

Option 1

This will work (see JS comments):

$(function(){
    var NewContent='<div class="added">Added</div>'
    $(".add").click(function(){
        // Check if the div exists, if so simply toggle visibility
        if($(".added").length)
           $(".added").toggle(); 
        else // Not yet added, add the content
            $("#spin").after(NewContent);
    });
});

Here's a working fiddle.

Option 2

If NewContent does not need to be dynamic, this is a cleaner solution:

HTML

<span class="add">add</span>
<span id="spin"><div class="added">Added</div></span>

JS

$(function() {
    var NewContent = '<div class="added">Added</div>'
    $(".add").click(function() {
        $(".added").toggle();
    });
});

CSS

.added {
    display:none;
}​

Here's a working fiddle.

​

Answer 6

All you need to do is toggle the display css property. If it is currently none, you change it to whatever display style you want. If it is currently something other than none, you change it to none.

Answer 7

You can simplify a lot by creating and hiding the "added" div right in the beginning.

CSS:

#spin {display: none;}

HTML:

<span class="add">add</span>
<span id="spin">Added</span>

jQuery:

$(function(){
    $(".add").click(function(){
        $("#spin").toggle();
    });
});

In other words, rather than dynamically creating "Added" and then toggling visibility, just toggle visibility (starting in an invisible state).

Answer 8

Jquery:

$(function(){
    var NewContent='<div class="added">Added</div>';
    var handleAddItem = function($add) {
        var added = false,
            $spin = $('#spin'), //Suggest using something more relevant to the object getting clicked??
            $content = $(NewContent);
        $add.click(function(){
            if(added){
                added=true;
                $spin.after($content);
            }else{
                $content.toggle();
            }
        }
    };
    $(".add").each(function(){handleAddItem($(this));});
});