<section class="product">
     
        <div class="p-con-flex">
            <div class="p-con" data-name="Adidas" data-price="$78" data-image="../img/t-shirts/f2.jpg" data-description="Description of the product"
            onclick="window.location.href='singleproduct.html';"
            >
            
                <div class="p-con-img">
                    <img src="../img/t-shirts/f1.jpg" alt="" id="main-img">

                </div>
  
                <div class="small-img-show">
                    <div class="small-img">
                        <img src="../img/t-shirts/f1.jpg" alt="" class="small-img-src">
                    </div>
                    <div class="small-img">
                        <img src="../img/t-shirts/f2.jpg" alt="" class="small-img-src">
                    </div>
                    <div class="small-img">
                        <img src="../img/t-shirts/f3.jpg" alt="" class="small-img-src">
                    </div>
                    <div class="small-img">
                        <img src="../img/t-shirts/f4.jpg" alt="" class="small-img-src">
                    </div>
                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>
                
            </div>





            
            <div class="p-con">
                <div class="p-con-img" onclick="window.location.href='singleproduct.html'; getProduct();">
                    <img src="../img/t-shirts/f2.jpg" id="shop-p-m">


                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/t-shirts/f3.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/t-shirts/f4.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/t-shirts/f5.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="../img/t-shirts/f6.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="img/t-shirts/f7.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>
            </div>


          
            <div class="p-con">
                <div class="p-con-img">
                    <img src="img/t-shirts/f8.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>

            </div>     

            <div class="p-con">
                <div class="p-con-img">
                    <img src="img/t-shirts/n1.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="img/t-shirts/n2.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>



            <div class="p-con">
                <div class="p-con-img">
                    <img src="img/t-shirts/n3.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="img/t-shirts/n4.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="img/t-shirts/n5.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="img/t-shirts/n6.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button> <i class="fa-solid fa-cart-shopping"></i></button>
                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="img/t-shirts/n7.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button title="click" type="button"> <i class="fa-solid fa-cart-shopping"></i></button>

                    </div>

                </div>


            </div>
            <div class="p-con">
                <div class="p-con-img">
                    <img src="img/t-shirts/n8.jpg" alt="">

                </div>
                <div class="text">
                    <h6>adidas</h6>
                    <h3>cartoon Astronaut t-shirt</h3>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>

                    </div>
                    <div class="cart-price">
                        <p>$78</p>
                        <button type="button"> <i class="fa-solid fa-cart-shopping"></i></button>

                    </div>

                </div>


            </div>

        </div>
    </section>     i want o add another section where i can upload trousers only the first on will be for t0shirtrs but i want to be i n a tab like there will be a section on top where i can click on the tab and it would go to the section i want to if i click on t-shirt section it will make the t-shirt isi ble and oyhers invisible