- The list item will only be displayed when its parent has the CSS class "current"

I am working with a list of categories known as Taxons:

Below is the Rails code snippet:

<div id="taxonomies" class="sidebar-item">
<% @taxonomies.each do |taxonomy| %>
  <ul class="navigation-list">

      <% taxonomy.root.children.each do |taxon| %>
        <li<%= ' class="current"' if @taxon and ([@taxon] + @taxon.ancestors).include?(taxon) %>><%= link_to taxon.name, seo_url(taxon) %></li>

            <% if @taxon.nil? %>
            <% else %>

                <% @taxon.children.each do |taxon|%>
                    <li><%= link_to taxon.name, seo_url(taxon) %></li>
                <% end %>

            <% end %>
      <% end %>
    </ul>
<% end %>
</div>

Currently, I am facing an issue where clicking on a specific taxonomy in the view displays the children of all parents instead of just the selected ones. Here's how it looks right now:

Category 1 Decendent 1 Decendent 2 Category 2 Decendent 1 Decendent 2 Category 3 Decendent 1 Decendent 2

However, what I actually want is:

Category 1 Decendent 1 Decendent 2 Category 2 Category 3

In order to achieve this, I thought about using a conditional statement like <% if :class => 'current %> to only show the LI element if the category has the 'current' class. Does anyone know if this approach is viable?

Answer №1

Why not simply reuse the same condition when adding the class attribute?

if @taxon and ([@taxon] + @taxon.ancestors).include?(taxon)

It would look like this:

<% taxonomy.root.children.each do |taxon| %>
<li<%= ' class="current"' if @taxon and ([@taxon] + @taxon.ancestors).include?(taxon) %>><%= link_to taxon.name, seo_url(taxon) %></li>

    <% if @taxon and ([@taxon] + @taxon.ancestors).include?(taxon) %>

        <% @taxon.children.each do |taxon|%>
            <li><%= link_to taxon.name, seo_url(taxon) %></li>
        <% end %>

    <% end %>
<% end %>

Answer №2

Make sure to include an instant variable in your controller's code block. Here is an example:

def blablabla
  @current_page = Category.name
  if params[:id => @current_page]
    @current = "current"
  else
    @current = ""   
  end
end

Next, update this section of the code:

<li<%= ' class="#{@current}"' if @taxon and ([@taxon] + @taxon.ancestors).include?(taxon) %>><%= link_to taxon.name, seo_url(taxon) %></li>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring Angular 7: Understanding the HTML5 Fullscreen API and Overcoming Errors

I am currently using Angular 7 and I am trying to implement a fullscreen button in my app. I have utilized the HTML5 Fullscreen API and created two functions for this purpose: openfullscreen() { // Trigger fullscreen console.log('gg'); ...

place an image next to a div element

Currently, I have a table-like structure with two columns that I am struggling to make mobile responsive. Take a look at the code snippet below: setTimeout(function() { odometer.innerHTML = '1925' }) .fiftyFiftySection { back ...

Creating and sending HTML formatted emails using Django 1.7

The function send_mail() now accepts a new parameter - html_message. Check out the official documentation for more details. I have an email.html file and I need to send an html version of my message using Django 1.7. Can someone provide me with an example ...

UI experiencing issues with selecting radio buttons

When trying to select a radio button, I am facing an issue where they are not appearing on the UI. Although the buttons can be clicked, triggering a function on click, the selected option is not displayed visually. <div data-ng-repeat="flagInfo in avai ...

Pixels range

Is it possible to create a Range from a given rectangle of pixels, similar to how we can get the bounding rectangle of a Range using getBoundingClientRect? ...

Error: Unable to locate package @babel/preset-vue version 7.1.0

I am currently working on a simple website using Ruby on Rails and Vue.js, but I am running into issues when trying to start the local server. After executing npm run dev in the terminal, I encountered 2 errors: This dependency was not found: * /Users/mu ...

Having difficulty aligning the container div in the center

I'm trying to create a centered grid of full-width buttons, but for some reason, I just can't seem to get the container centered. Any suggestions? Check out the code here - https://jsfiddle.net/a6qo6tzL/ Thank you! <div class="Wrapper"> ...

The CSS override in Bootstrap 4 does not take effect unless it is placed within the <head> section of the HTML

After browsing through advice given on this Stack Overflow thread, I attempted to implement my own CSS solution: #bootstrap-override .carousel.slide { max-width: 1920px; min-width: 900px; overflow: hidden; margin ...

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...

Problem faced with Modal in Bootstrap 5 and Blazor

I have been working on a Blazor project that utilizes Bootstrap for modal handling. Specifically, I am trying to leverage the data-bs-backdrop and data-bs-keyboard attributes in my ModalAlert.razor component to manage how the backdrop and keyboard behave w ...

What is the best way to generate a new DIV every time a button is clicked?

I am attempting to make a square DIV that is red and measures 100x100 pixels. Each time a button is clicked, I want the square to be created. However, the code I have written is not functioning properly: <html> <title> Create New Div ...

Disabling pointer events using `pointer-events: none` may not function as expected on mobile

As I work on developing a custom drag and drop module for Vue, I encountered an issue. In order to override the default browser Drag and Drop behavior, I have implemented logic to clone the div element that needs to be dragged on pointer down event. Subseq ...

The hover feature on my website is making the picture flicker

I am experiencing an issue with a map on my website that contains four colored squares. When I hover over one of the squares, the image of the map changes to show the route corresponding to that color. However, this causes the image to shift position and i ...

Slower CSS rendering as Javascript finishes its tasks

I am currently dealing with a jQuery plugin that is quite large and complex, but I will not be sharing it here to keep things simple. The issue I am facing is relatively straightforward, so I will focus on the essential code snippets: There is a click eve ...

Understanding the reasons for floated elements impacting the heights of non-floated elements (D7 views blocks using the zen theme)

Currently working on updating a website that was originally built on D7 with a 7.x-56 zen sub theme. The layout of the theme consists of responsive horizontally stacked content regions. Recently, I created a custom blog content type along with three views ...

Tips for maintaining the chat scroll position while typing on mobile devices

Check out this example page: https://codesandbox.io/s/summer-flower-uxw47?file=/index.html:4175-4223 The issue at hand is that when accessing the site from a mobile device and tapping on the input field, the keyboard pops up. This causes the text in the m ...

Managing callback functions within an Angular 1.5 component

I am facing a challenge with handling callbacks in my Angular application. My goal is to load an image, convert it to base64 - which I have successfully achieved. However, I need to access the converted image data outside of the filesSelect.onchange; func ...

Change the border color of radio buttons when clicked

When one of the radio buttons is clicked, it should give an outer border with color. When the other radio button is clicked, it should give an inner border that surrounds the image. <!DOCTYPE html> <html> <head> ...

What is the best way to encrypt this URL?

I'm struggling with removing the backslash from this PHP link. Can anyone offer assistance? ...

Linking the User Interface to the Controller and Database

My UI requires a text field where users can input the streamId (e.g. 1, 2, 3) and then click 'ok' to display a table on the screen from the database based on the streamId value. ...