I am currently developing a website for an educational institution that includes schools with subdivisions such as matric, CBSE, and state board, as well as a college. My goal is to create a user interface where clicking on a specific stream (such as matriculation) will activate the corresponding schools, while deactivating the others. I have implemented this using pills and have labeled each institution accordingly.
Here is the HTML structure I have used:
<section class="ourscl" id="school">
<div class="container">
<div class="text-center">
<h2 class="hdng"><span class="schools-title">Our Schools</span></h2>
<h4 class="italic-line"> 100+ schools with world class education </h4>
<div class="plus_image"><img class="repeat_image"></div>
<ul class="nav nav-pills nav-justified navbar-default" style="color:white;margin-top:30px;margin-bottom:30px">
<li class="active brdrlft tab-wid font-sz"><a href="#mtrcscl1" data-toggle="pill">Matriculation Stream</a></li>
<li class="brdrlft tab-wid font-sz"><a data-toggle="pill" href="#cbse">CBSE Stream</a></li>
<li class="brdrlft tab-wid font-sz"><a data-toggle="pill" href="#hgrscl">State Board</a></li>
<li class="tab-wid font-sz"><a data-toggle="pill" href="#clg">B.Ed College</a></li>
</ul>
<div class="tab-content" style="margin-top:30px;margin-bottom:30px">
<!-- School details go here-->
</div>
</div>
</div>
</section>
I have also styled the interface using the following CSS:
.ourscl .navbar-default{
background-color:rgb(222, 35, 41) !important; /*rgb(144,21,14)!important;*/
}
/* Other CSS styles go here */
The link to the JSFiddle demonstrating the implementation can be found here. Please adjust the output box size for a better view of the columns, as shown in the attached image.
My desired output should resemble the image shown in this link. When a specific stream is selected, only the schools associated with that stream should be displayed and arranged in the top row. Any guidance or suggestions to improve this functionality would be greatly appreciated.