JSFiddle - React, Tailwind, and code Playground

by Sethu raman

HTML

<a href="#d1" id="f1">Head Light</a><br /> 
             <a href="#d2" id="f2">Hood</a> <br />
             <a href="#d3" id="f3">Wind-shield</a><br /> 
             <a href="#d4" id="f4">Rear wheels</a> <br />
             <a href="#d5" id="f5">Sun roof</a> <br />
             <a href="#d6" id="f6">Front wheels</a> <br />
             <a href="#d7" id="f7">Front hoop</a> <br />
             <a href="#d8" id="f8">Rear mirrors</a> <br />
             <a href="#d9" id="f9">Finishing</a> <br />


    <div id="d1" style="display:none;"> A headlamp is a lamp attached to the front of a     </div>

    <div id="d2" style="display:none;"> he hood bonnet is the hinged cover over the engine  </div>

    <div id="d3" style="display:none;"> The windshield or windscreen of an aircraft, car, bus, </div>

    <div id="d4" style="display:none;"> In automotive design, the automobile layout describes   </div>

    <div id="d5" style="display:none;"> Lorem Ipsum is simply dummy text of the printing </div>

    <div id="d6" style="display:none;"> The term motorcar has formerly also been used </div>

    <div id="d7" style="display:none;"> The weight of a car influences fuel consumption </div>

    <div id="d8" style="display:none;"> Most cars are designed to carry multiple occupants</div>

    <div id="d9" style="display:none;"> Mary Ward became one of the first documented </div>

<br />



<div class="dispfe" style="width:40%;height:400px;border:solid black 1px;">

</div>

JavaScript

$("a").click(function(event) {
            $(".dispfe").html($($(this).attr('href')).html());
        });