JSFiddle - React, Tailwind, and code Playground

HTML

<div class="formhead" id="login1">
    <input name="login" class="flyer checkbox" type="checkbox" value="1" />
    <div style="float:left;">
        <span class="ico"><img  src="http://code.neoq.de/ico/key.png" /></span>
    </div><div class="cross" style="float:right;"></div>
    <div>
        <h2 class="form">Login f&uuml;r Kunden</h2>
        <span class="mitbestellen_nojq">Du bist bereits Kunde?</span> </div>
    
</div>

<div class="formbody">
</div>



<div class="formhead" id="reg1">
    <input name="neukunde" class="flyer checkbox" type="checkbox" value="1" />
    <div style="float:left;">
        <span class="ico"><img  src="http://code.neoq.de/ico/vcard_edit.png" /></span>
    </div><div class="cross" style="float:right;"></div>
    <div>
        <h2 class="form">Anmeldung f&uuml;r Neukunden</h2>
        <span class="mitbestellen_nojq">Werde jetzt Kunde bei uns!</span> </div>
    
</div>

<div class="formbody">
</div>

CSS

#formhead, .formhead, .formhead_open, #berechnung
{
    font-weight: bold;
    margin-top: 15px;
    width: 400px;
    display: inline-block;
    padding: 5px 10px 6px;
    text-decoration: none;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
    background-color:#f5dcfc;
    padding: 10px;
}

JavaScript

//beim jquery ausfall
$(':checkbox').removeAttr('checked');
$('.formbody').css('display', 'none'); $('.formhead').children('input:checkbox').css('display', 'none'); 
$('.formbody:eq(0)').css('display', 'inherit');
// I DISABLED THE FOLLOWING LINE BECAUSE IT ONLY WORKED PARTLY
// MAKE SURE YOU UNDERSTAND THE CONSEQUENCES
//$('.formhead:eq(0)').children('input:checkbox').attr('checked', 'checked');


$('.formhead').bind('click', function() {
    if ($(this).children('input:checkbox').is(':checked')) {
        $(this).children('input:checkbox').removeAttr('checked');
        $(this).next('.formbody').css('display', 'none');
        $(this).children().children('span.mitbestellen').html(' gleich mitbestellen?');
        $(this).children().children('span.ico').html('<img src="http://code.neoq.de/ico/action_add_2.gif" />');
        $(this).children('.cross').html('');
    } else {
        $(this).next('.formbody').css('display', 'inherit');
        $(this).children('input:checkbox').attr('checked', 'checked');
        $(this).children().children('span.mitbestellen').html(' wird mitbestellt!');
        $(this).children().children('span.ico').html('<img src="http://code.neoq.de/ico/action_check.gif" />');
        $(this).children('.cross').html('<img src="http://code.neoq.de/ico/action_delete.gif" />');
        
        var $theother = $("#reg1, #login1").not(this);
        
        if ($theother.children('input:checkbox').is(':checked')) {
            $theother.children('input:checkbox').removeAttr('checked');
            $theother.next('.formbody').css('display', 'none');
            $theother.children().children('span.ico').html('<img src="http://code.neoq.de/ico/action_add_2.gif" />');
            $theother.children('.cross').html('');
        }
    };
    // MAKE SURE YOU UNDERSTAND THAT THE USER CAN ALSO CHOOSE NEITHER OF THE OPTIONS!
});