JSFiddle - React, Tailwind, and code Playground

by Aleksandra Strelkova

HTML

<div id="person_tab">
                <ul class="person_tab_list">
                    <li><a class="first active" href="#" >Фіз. особа</a></li><li><a class="second" href="#" onclick="my_f('tab2')">Юр. особа</a></li>
                </ul>
            </div>
            <div id="person_tab_container">
                <div class="tab_content active" id="tab1">
                    <form class="users_information">
                        <table>
                            <tr>
                                <td><label for="name">Ім'я</label></td>
                                <td><label for="surname">Фамілія</label></td>
                                <td></td>
                                <td><label for="country">Країна</label></td>
                                <td></td>
                            </tr>
                            <tr>
                                    <td><input type="text" name="name"></td>
                                    <td><input type="text" name="surname"></td>
                                    <td></td>
                                    <td colspan="2"><input type="text" name="country"></td>
                            </tr>
                            <tr class="empty">
                                <td></td>
                            </tr>
                            <tr>
                                    <td colspan="2"><label for="company_name">Назва компанії, організації</label></td>
                                    <td></td>
                                    <td><label for="city">Місто</label></td>
                                    <td><label for="state">Штат, район</label></td>
                            </tr>
                       
                        </table>
                    </form>
                </div>
                <div class="tab_content" id="tab2" >
                        <form class="users_information">
                                <table>
                                   ...

CSS

#person_tab_container #tab2 {
    height: 640px;
    display: block;
}

JavaScript

function my_f(objName) {

var object = document.getElementById(objName);

object.style.display == 'none' ? object.style.display = 'block' : object.style.display = 'none'


}