How do I display certain html based on if statement?

I have a plugin on my wordpress site allows me to create only ONE template for posts when viewed in single item. However, these single items can be different categories, and need different views. I have created a view for the Announcements category, but now I want to set a view for the Media category. I think I can do this by making div classes for Announcements and Media and using Javascript to toggle displays based on something. Im not sure what exactly that something can be. The only thing that had categories in my source is:

 <div class="above-entry-meta"><span class="cat-links"><a 
 href="http://localhost/wordpress2018/category/announcement/" 
 style="background:#fff" rel="category tag">Announcement</a>&nbsp;</span> 
 </div>

1. How would I target that on Javascript?
2. What condition in JS should I set?
3. What would I have to place on my HTML.

---

Here is the output that i'm trying to target:

Announcement view:

<div class="announcementstemplate">
<br><postheading>[wpv-post-title]</postheading>
<div class="userinfo">
Created on [wpv-post-date format="F j, Y g:i a"] by [wpv-post-author 
format="link"]. This announcement currently has [wpv-post-comments- 
number none="no comments" one="1 comment" more="% comments"].
</div>
<br>
<div class="boxed"><typelabel>TAGS</typelabel><hr/>
<toxlabel>Tags: </toxlabel><taxcontent>[wpv-post-taxonomy 
type="post_tag"]</taxcontent><br>
</div><br>
<div class="boxed"><typelabel>Featured Image</typelabel><hr/>
<toxlabel>Tags: </toxlabel><taxcontent>[types field='featured-image-of- 
story' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]</taxcontent> 
<br>
</div><br>
<div class="boxed"><typelabel>STORY</typelabel><hr><p>[wpv-post-body 
view_template="None"]</p></div><br>
</div>

Media view:

<div class="mediatemplate">
<br><postheading>[wpv-post-title]</postheading>
<br>
<div class="boxed"><typelabel>Video</typelabel><hr><p>[wpv-post- 
videoview_template="None"]</p></div><br>
<div class="boxed"><typelabel>Media</typelabel><hr/>
<toxlabel>Stuff: </toxlabel><taxcontent>[wpv-post-taxonomy type="medias"] 
</taxcontent><br>
</div><br>
<div class="boxed"><typelabel>Pictures:</typelabel><hr/>
<toxlabel>Tags: </toxlabel><taxcontent>[types field='featured-image-of- 
story' title='%%TITLE%%' alt='%%ALT%%' size='Medium'][/types] 
</taxcontent><br>
</div><br>
<div class="boxed"><typelabel>STORY</typelabel><hr><p>[wpv-post-body 
view_template="None"]</p></div><br>
</div>

I am thinking something along the lines of

if (href == "http://localhost/wordpress2018/category/announcement/") {
display = .div class="announcementstemplate";
}
else if (href == "http://localhost/wordpress2018/category/media/") {
display = .div class="mediatemplate";
}

I am still a noob at javascript, so thanks in advance!