Toggle colour link colour on click

Question

I have a program where a series of labels are shown and each time you click on them, they appear within a div ( <div id = "div1"> </ div> ), and to remove the labels, you must return to click but this time on the labels that have appeared inside div1.

What I'm trying now is that every time I click on the labels outside the div1, they turn blue and if I delete them from div1, they go back to the same color they were.

Can you help me? Can i do it in html + css? or i need js?

This is my JS:

var ar = new Array();

function myFunction(tagName, tagId) {
    if (!document.getElementById(tagName)) {
        document.getElementById("div1").innerHTML +=
            '<label class="tags" id="' + tagName + '" onclick="rem(\'' + tagName + '\', \'' + tagId+ '\')">' + tagName + ',  </label>';

        ar.push(tagId);
        document.getElementById("hiddenfield").value = ar;
    }
}

function rem(tagName, tagId) {
    document.getElementById(tagName).remove();
    ar.splice(ar.indexOf(tagId), 1);
    document.getElementById("hiddenfield").value = ar;
}

This is my PHP:

<p>
    Introduce tags:
</p>

<div id="div1">
</div>
<h3>
    <?php
    while($row = $result->fetch_assoc()) {
        echo "<label><a class=\"trigger blue lighten-4\" data-toggle=\"modal\" data-target=\"#conditionModal\" onclick=\"myFunction('" . $row["tag_name"] ."', '" . $row["tag_id"] ."')\">" . $row["tag_name"] ." </a></label>";
    }
    ?>
</h3>

This is my CSS:

.trigger {
    padding: 1px 10px;
    font-size: 20px;
    font-weight: 400;
    border-radius: 10px;
    background-color: aliceblue;
    color: #212121;
    display: inline-block;
    margin: 2px 5px;
    cursor:pointer;
}

a:hover {
    color: black;
    background-color: red;/* #e6e6e6 */
}
/* selected link */
a:active {
    color: white;
}

.tags {
    font-family: Arial, Helvetica, sans-serif;
    cursor:pointer;
    padding: 1px 10px;
    font-size: 15px;
    font-weight: 400;
    border-radius: 10px;
    background-color: aliceblue;
    color: #212121;
    display: inline-block;
    margin: 2px 5px;
}

.tags:hover {
    color: red;
}

What I would like is something like this:

http://jsfiddle.net/Shef/L6VqK/

But instead of clicking the same link, the link is inside Div1

Answer 1

These are the basics. Just have two elements containing your labels. ( I use a list here, since it makes sense to use a list when listing multiple items. ) Then have the color be determined by the list they belong to, instead of having the color on the items themselves.

Switching from one list to the other is as easy as just appending the target to the new list.

 const tags = [ ...document.querySelectorAll( '.tag' )]; const input = document.querySelector( '#tags_input' ); const output = document.querySelector( '#tags_output' ); const move = event => { const list = event.target.parentNode.parentNode; if ( list.id === 'tags_input' ) output.appendChild( event.target.parentNode ); else if ( list.id === 'tags_output' ) input.appendChild( event.target.parentNode ); }; tags.forEach( tag => tag.addEventListener( 'click', move )); 

 #tags_input .tag { background-color: lightblue; } #tags_output .tag { background-color: grey; } 

 <ul id="tags_input"> <li class="tag"><a href="#">First tag</a></li> <li class="tag"><a href="#">Second tag</a></li> <li class="tag"><a href="#">Third tag</a></li> <li class="tag"><a href="#">Fourth tag</a></li> <li class="tag"><a href="#">Fifth tag</a></li> <li class="tag"><a href="#">Sixth tag</a></li> <li class="tag"><a href="#">Seventh tag</a></li> </ul> <ul id="tags_output"></ul> 

Keep in mind that this is very similar to basic link functionality, where already clicked links use the :visited color, which can be fully done in CSS ( by using a:visited, a:hover, a:active, etc ).

It's only moving the items and resetting the link color back to the original , as if the link is not clicked yet, that cannot be fully done in CSS.