JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<html>
    <a href="#">Show Forms</a>
    
    <form action="#" method="post" class="activate-share">
        <h1>This is form 1 and no other content should be shown</h1>
      
        <input type="checkbox" class="activate-share" value="1" />       
        
        <div class="hidden-share" style="display: none;">I should be hidden</div>
    </form>
    
    <form action="#" method="post" class="activate-share">
        <h1>This is form 2 and other content should be shown</h1>
        
        <input type="checkbox" class="activate-share" checked="checked" value="1" />
        <div class="hidden-share">I should be shown </div>
    </form>
</html>

CSS

form {
    display:none;
    margin:10px;
    border:1px solid black;
}

JavaScript

$('a').click(function(){ 
    $('form').show(); 
    $(this).remove();
});

$('input:checkbox').change(function() {
    var $check = $(this);
    if ( $check.is(':checked') ) {
        $check.parent().find('.hidden-share').fadeIn();    
    } else {
        $check.parent().find('.hidden-share').fadeOut();    
    }
});