instead of showing quizzes, study guides and video tutorials all at once, how can i add a tab with links for each quizzes, study guides and video tutorials at the center of the page and show each of its data when clicked. In this case the page will initially load on the quizzes tab and show quizzes but user can click one of the other tabs to immediately see the study guides or video tutorials via ajax: <?php
if (isset($_GET['id'])) {
    $subjectId = $_GET['id'];
    $subject = $conn->query("SELECT sub_title FROM subject_tbl WHERE sub_id='$subjectId'");
}
if (!empty($subject)) {
    $row = $subject->fetch(PDO::FETCH_ASSOC);
    $subName = ucwords(strtolower($row['sub_title']));
} else {
    $subName = "Subject";
}
?>
<div class="app-main__outer">
    <div id="refreshData">
        <div class="app-main__inner">
            <div class="app-page-title">
                <div class="page-title-wrapper">
                    <div class="page-title-heading">
                        <div class="page-title-icon">
                            <i class="fa fa-desktop icon-gradient bg-mean-fruit">
                            </i>
                        </div>
                        <div style="font-weight: bold;"><?php echo $subName; ?> Quizzes & Study Guides
                            <div class="page-title-subheading" style="font-weight: 600;">Find all quizzes and study guides for <?php echo $subName; ?> subject below.
                            </div>
                        </div>
                    </div>

                    <div class="page-title-actions">
                        <button type="button" onclick="history.back()" class="back-btn">
                            <i class="fa fa-arrow-left"></i> Back
                        </button>
                    </div>
                </div>
            </div>

            <style>
                ::-webkit-scrollbar {
                    width: 20px;
                }

                ::-webkit-scrollbar-thumb {
                    background: lightgray;
                    border-radius: 5px;
                }

                p {
                    text-align: center;
                }

                .title {
                    text-align: center;
                    text-transform: uppercase;
                }

                .yt_player_iframe {
                    width: 100%;
                    height: 400px;
                    margin: auto;
                    display: block;
                    border: none;
                }

                .popup-btn {
                    width: 100%;
                    display: block;
                    margin: 20px auto;
                    cursor: pointer;
                    border: 2px solid black;
                    background-color: white;
                }

                .close-btn {
                    width: 100px;
                    height: 50px;
                    display: block;
                    margin: 20px auto;
                    cursor: pointer;
                    border: 2px solid black;
                    background-color: white;
                }

                .popup-btn:hover {
                    color: white;
                    background-color: black;
                }

                .video-popup {
                    display: none;
                    width: 100vw;
                    height: 100vh;
                    margin: auto;
                    position: fixed;
                    top: 0;
                    box-shadow: 10px 10px 10px 10px #ff2e97;
                    border-radius: 24px;
                    transition-timing-function: ease-in-out;
                }

                .popup-bg {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                }

                .popup-content {
                    background: linear-gradient(to right, #4A00E0, #8E2DE2);
                    position: absolute;
                    top: 50%;
                    left: 40%;
                    width: 50%;
                    transform: translate(-50%, -50%);
                    border-radius: 24px;
                    box-shadow: #4A00E0 0px 42px 150px 15px;
                }

                @media screen and (max-width: 960px) {
                    .popup-content {
                        left: 45%;
                        width: 100%;
                    }

                }

                .popup-container {
                    position: relative;
                    overflow: hidden;
                    width: 100%;
                    padding-top: 56.25%;
                }

                .yt_player_iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    width: 100%;
                    height: 100%;
                }

                .popup-title {
                    padding: 30px;
                    margin: 0 auto;
                    color: white;
                    text-transform: uppercase;
                    font-weight: bold;
                    font-size: 24px;
                }

                .card .mb-3 {
                    margin-bottom: unset !important;
                }

                .mb-3 {
                    border-radius: 15px !important;
                    height: 100%;
                    background: white !important;
                    color: #777;
                    padding: 15px !important;
                    box-shadow: 0 8px 8px -4px #00acbe !important;
                    margin-bottom: 1rem !important;
                }

                .image-containr img {
                    object-fit: cover;
                    width: 100%;
                    height: 70%;
                    margin-top: 15px;
                    border-radius: 15px;
                    box-shadow: 0 9px 23px -7px #9814fe;
                }

                .image-containr img:hover {
                    -webkit-transform: scale(1.2);
                    transform: scale(1.04);
                    box-shadow: 0 13px 30px -7px #ff2e97;
                }

                .widget-heading {
                    color: #4b0082;
                    font-size: 18px;
                    font-weight: 600 !important;
                    display: flex;
                    justify-content: center;
                }

                .widget-subheading {
                    color: #4b0082;
                    font-size: 15px;
                    display: flex;
                    justify-content: center;
                }

                h2 {
                    margin: 25px;
                }

                .widget-numbers a {
                    background: linear-gradient(to left, #9814fe, #ff2e97);
                    color: white;
                    border-radius: 10px !important;
                    border: none;
                    border-radius: 10px;
                    font-size: 16px;
                    font-weight: bold;
                    cursor: pointer;
                    text-decoration: none;
                    padding: 10px 15px;
                    box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2);
                    user-select: none;
                    -webkit-user-select: none;
                    touch-action: manipulation;
                    cursor: pointer;
                }

                .widget-content-right {
                    margin-left: unset !important;
                }

                .widget-numbers a:hover {
                    background: #00ff7b;
                }

                .widget-content .widget-content-wrapper {
                    margin-bottom: 15px;
                }

                .card {
                    width: 100%;
                }

                .close-btn {
                    background: #ff2e97;
                    color: white;
                    border-radius: 10px !important;
                    border: none;
                    border-radius: 10px;
                    font-size: 16px;
                    font-weight: bold;
                    cursor: pointer;
                    text-decoration: none;
                    padding: 5px 10px;
                    box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2);
                    user-select: none;
                    -webkit-user-select: none;
                    touch-action: manipulation;
                    cursor: pointer;
                }

                .close-btn:hover {
                    background: #00ff7b;
                }

                .col-md-2 {
                    margin: 10px;
                }

                .col-md-3 {
                    margin: 10px;
                }
            </style>
            <!-- Exams Section -->
            <h2>Quizzes</h2>
            <div class="row">
                <?php
                if (isset($_GET['id'])) {
                    $subjectId = $_GET['id'];
                    $exams = $conn->query("SELECT * FROM exam_tbl WHERE sub_id='$subjectId' AND examStatus='active' ORDER BY ex_title ASC")->fetchAll(PDO::FETCH_ASSOC);
                }
                if (!empty($exams)) {
                    foreach ($exams as $exam) { ?>
                        <div class="col-md-3">
                            <div class="card mb-3 widget-content" onclick="location.href='#';" style="cursor: pointer;">
                                <div class="widget-content-wrapper text-white" style="flex-direction: column; justify-content: space-between;">
                                    <div class="widget-content-left">
                                        <div class="widget-heading"><?php echo $exam['ex_title']; ?></div>
                                        <div class="widget-subheading"><?php echo $exam['ex_questlimit_display']; ?> Questions</div>
                                    </div>
                                    <div class="image-container">
                                        <img src="images/quiz.png" alt="Exam Image" />
                                    </div>
                                    <div class="widget-content-right">
                                        <div class="widget-numbers text-white">
                                            <a href="#" id="startQuiz" class="startQ" data-id="<?php echo $exam['ex_id']; ?>">Start Quiz</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php }
                } else { ?>
                    <div class="col-md-12">
                        <div class="card mb-3 widget-content bg-exam-card">
                            <div class="widget-content-wrapper text-white">
                                <div class="widget-content-left">
                                    <div class="widget-heading" style=" font-size: 22px; color: #ff2e97;">No Quizzes Available</div>
                                    <div class="widget-subheading" style=" font-size: 20px; color: #ff2e97;">Updating soon! Try again later</div>
                                </div>
                            </div>
                        </div>
                    </div> <?php } ?>
            </div>
            <h2>Study Guides</h2>
            <?php
            // Display study guides
            if (isset($_GET['id'])) {
                $subjectId = $_GET['id'];
                $guides = $conn->query("SELECT * FROM guide_tbl WHERE sub_id='$subjectId' AND gu_status='active' ORDER BY gu_title ASC")->fetchAll(PDO::FETCH_ASSOC);
            }
            if (!empty($guides)) {
            ?>

                <div class="row">
                    <?php
                    foreach ($guides as $guide) {
                    ?>
                        <div class="col-md-2">
                            <div class="card mb-3 widget-content" onclick="location.href='#';" style="cursor: pointer;">
                                <div class="widget-content-wrapper text-white" style="flex-direction: column; justify-content: space-between;">
                                    <div class="widget-content-left">
                                        <div class="widget-heading"><?php echo $guide['gu_title']; ?></div>
                                        <!-- Add any other guide details here -->
                                    </div>
                                    <div class="image-container">
                                        <img src="images/guides.png" alt="Guide Image" />
                                    </div>
                                    <div class="widget-content-right">
                                        <div class="widget-numbers text-white">
                                            <a href="home.php?page=guide&id=<?php echo $guide['gu_id']; ?>">View Guide</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php
                    }
                    ?>
                </div>
            <?php
            } else {
            ?>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card mb-3 widget-content bg-exam-card">
                            <div class="widget-content-wrapper text-white">
                                <div class="widget-content-left">
                                    <div class="widget-heading" style="font-size: 22px; color: #ff2e97;">No Study Guides Available</div>
                                    <div class="widget-subheading" style="font-size: 20px; color: #ff2e97;">Updating shortly! Try again later</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php
            }
            ?>
            <h2>Video Tutorials</h2>
            <div class="row">
                <?php
                if (isset($_GET['id'])) {
                    $subjectId = $_GET['id'];
                    $videos = $conn->query("SELECT * FROM subject_videos WHERE subj_id='$subjectId' ORDER BY vid_id ASC")->fetchAll(PDO::FETCH_ASSOC);
                }
                if (!empty($videos)) {
                    foreach ($videos as $video) {
                        $embedLink = $video['vid_link'];
                        $startPos = strpos($embedLink, '/embed/') + 7;
                        $endPos = strpos($embedLink, '?');
                        $youtubeId = substr($embedLink, $startPos, $endPos - $startPos);
                ?>

                        <div class="col-md-3">
                            <div class="card mb-3 widget-content" onclick="location.href='#';" style="cursor: pointer;">
                                <div class="widget-content-wrapper text-white" style="flex-direction: column; justify-content: space-between;">
                                    <div class="widget-content-left">
                                        <div class="widget-heading"><?php echo $video['vid_title']; ?></div>
                                        <div class="widget-subheading" style="font-size: 12px;">CLICK VIDEO TO WATCH</div>
                                    </div>
                                    <div class="image-containr">
                                        <a class="thumb"><img src="http://img.youtube.com/vi/<?php echo $youtubeId; ?>/0.jpg" /></a>
                                    </div>
                                    <div class="widget-content-left" style="text-align: left !important; margin-top: -45px !important;">
                                        <div class="widget-heading" style="font-size: 16px; text-align: left !important;">Description</div>
                                        <div class="widget-subheading"><?php echo $video['vid_description']; ?></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php }
                } else { ?>
                    <div class="col-md-12">
                        <div class="card mb-3 widget-content bg-exam-card">
                            <div class="widget-content-wrapper text-white">
                                <div class="widget-content-left">
                                    <div class="widget-heading" style=" font-size: 22px; color: #ff2e97;">No Videos Available</div>
                                    <div class="widget-subheading" style=" font-size: 20px; color: #ff2e97;">Updating soon! Try again later</div>
                                </div>
                            </div>
                        </div>
                    </div> <?php } ?>
            </div>
            <div class="video-popup">
                <div class="popup-bg"></div>
                <div class="popup-content">
                    <p class="popup-title"><?php echo $video['vid_title']; ?></p>
                    <div class="popup-container">
                        <iframe id="youtube_player" class="yt_player_iframe" src="<?php echo $video['vid_link'] ?>" title="<?php echo $video['vid_title']; ?>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>

                    <div class="widget-content-left" style="margin-top: 20px !important;">
                        <div class="widget-heading" style="font-size: 17px; color: white !important;">Description</div>
                        <div class="widget-subheading" style="color: white !important; margin-top: 10px !important; padding: 15px;"><?php echo $video['vid_description']; ?></div>
                    </div>
                    <button class=" close-btn" id="stop-button">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>

<script>
    $(document).ready(function() {
        $('.thumb').on('click', function() {
            $('.video-popup').slideDown('slow');
            return false;
        });

        $('.popup-bg').on('click', function() {
            $('.video-popup').slideUp('slow');
            document.querySelectorAll('iframe').forEach(v => {
                v.src = v.src
            });
            document.querySelectorAll('video').forEach(v => {
                v.pause()
            });
        });

        $('.close-btn').on('click', function() {
            $('.video-popup').slideUp('slow');

            document.querySelectorAll('iframe').forEach(v => {
                v.src = v.src
            });
            document.querySelectorAll('video').forEach(v => {
                v.pause()
            });
        });

    });
</script>