JSFiddle - React, Tailwind, and code Playground

by tyckr

HTML

<div class="x-column x-sm questioncard x-1-1" style="padding: 0px 0px 0px 0px; "><div class="x-text"><h5>Vill du ge ut en <a id="showdiv1">pappersbok</a> eller en <a id="showdiv2">ebok</a>?</h5>
</div></div>

<div id="div1" class="x-section" style=" margin: 0px 0px 0px 0px; padding: 45px 0px 45px 0px; display:none;background-color: transparent;"><div class="x-container max width" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "><div class="x-column x-sm x-1-1" style="padding: 0px 0px 0px 0px; "><h4 id="book" class="h-custom-headline slogan-head h4"><span>Pappersböcker – så funkar det</span></h4><div class="x-text"><p>Med Publit laddar du snabbt och enkelt upp dina bokfiler. Välj pappersformat, bestäm pris, publicera och börja sälja. Enkelt. Vi trycker boken först efter att den är såld och skickar den direkt till kunden. Inget lager, alltså ingen ekonomisk risk för dig.</p>
</div></div></div>
    
<div class="x-container max width" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "><div class="x-column x-sm questioncard x-1-1" style="padding: 0px 0px 0px 0px; "><div class="x-text"><h5>Vill du veta mer om hur och var du kan sälja dina böcker, eller är du nyfiken på eböcker också?</h5>
</div></div></div></div>

<div id="div2" class="x-section" style=" margin: 0px 0px 0px 0px; padding: 45px 0px 45px 0px; display:none;background-color: transparent;"><div class="x-container max width" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "><div class="x-column x-sm x-1-1" style="padding: 0px 0px 0px 0px; "><h4 class="h-custom-headline slogan-head h4"><span>Eböcker – så funkar det</span></h4><div class="x-text"></div></div></div><div class="x-container max width" style="margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; "><div class="x-column x-sm questioncard x-1-1" style="padding: 0px 0px 0px 0px; "><div class="x-text"><h5>Vill du veta mer om hur och var du kan sälja dina böcker, eller är du nyfiken på eböcker...

CSS

a:hover {color:blue;}

JavaScript

publish();

var publish = function(){
$('#showdiv1').click(function() {
        $('div[id^=div]').hide();
        $('#div1').show();
        $(this).data('clicked', true);
        
        if($('#showdiv2').data('clicked')){
            $('#div1').append('<p>Div2 clicked</p>')
        }
        else {$('#div1').append('<p>Only div 1</p>')}
    });

    $('#showdiv2').click(function() {
        $('div[id^=div]').hide();
        $('#div2').show();
        $(this).data('clicked', true);
        
    });
}