I have 2 div tag group; one is the Local Form and the other one is the International Form. My goal is to active or display the one form depending on the current slug id echoed on the class.
I successfully get the current slug id and placed it in my class, but the problem was all 2 form are displayed.
the slug name are: "local" and "international"
<div id="app">
<?php
$tags = get_the_tags( $post->ID, 'post');
foreach ( $tags as $tag){
echo '<div id="form" class="'.$tag->slug.' **I like to add active class here**">'
?>
<h3><span><?php the_title(); ?></span><br>Local Application Form</h3>
..FORM DISPLAY HERE..
<?php '</div>'; ?>
<?php } ?>
</div>
<div id="app">
<?php
$tags = get_the_tags( $post->ID, 'post');
foreach ( $tags as $tag){
echo '<div id="form" class="'.$tag->slug.' **I like to add active class here**">'
?>
<h3><span><?php the_title(); ?></span><br>International Application Form</h3>
..FORM DISPLAY HERE..
<?php '</div>'; ?>
<?php } ?>
</div>
--CCS STYLE---
.local {
display: none;
}
.local .active {
display: block!important;
}
.international {
display: none;
}
.international .active {
display: block!important;
}
---OUTPUT GOAL----
<div id="form" class="local active"></div>
<div id="form" class="international"></div>
If the slug id "local" is currently use and has active class it will display to block, and the international form will display to none.
If the slug id "international" is currently use has active class it will display to block, and the local form will display to none.
Basically through php or javascript will get the current slug id and generate a new class called "active" to add in to new class.
I figure it out how I can put additional active class when current slugs is used by using terms in php
$terms = get_terms([
'taxonomy' => 'taxonomyname',
'hide_empty' => false,
]);
foreach( $terms as $term ){
$active = "";
if($term_id == $term->term_id) {
$active = "active";
}
echo '<div id="form" class="'.$tag->slug.''.$active.'"></div>';
}