Turn the Blog Topics from a List into a Dropdown

Regular Contributor

Is it possible to turn the blog topics list into a dropdown list that will filter the blogs?

Reply
0 Upvotes
7 Replies
Top Advisor

@Woodsy,

 

Yes, with custom html, css, hubl, and javascript.

 

Here's a tutorial on building simple drop down and you can find the post filter in these HubL docs. If you are using the template builder just place your code in a custom HubL module. 

Regular Contributor

Hi thanks. Is there a real world example that I could see how it has been coded using HubL?

Top Advisor

@Woodsy,

 

following the example in the tutorial I linked to:

 

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    {% post_filter "posts_by_topic" select_blog='default', expand_link_text='see all', overrideable=False, list_title='Posts by Topic', max_links=5, filter_type='topic', label='Posts by Topic' %}
  </div>
</div>

The post_filter module outputs a <ul> containing <li> and <a> by default so you only need to style these and hide the <h3> title that it outputs. If you want to get really fancy you can export the post_filter to the template then break it apart with a for loop. 

Occasional Contributor

Does not work

Highlighted
Top Advisor

@tlreuther,

 

this method has been proven to work. Do you want to ellaborate a little on why it isn't working for you?

Occasional Contributor

Sure!

This could be human error on my part, honestly. I've been sifting through the HubSpot community and attempting several different options so my brain may be a little fried on this.

 

I followed the instructions on W3Schools, also implemented the HUBL code and replaced the <li> options, as suggested in this forum:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Categories</button>
  <div id="myDropdown" class="dropdown-content">
    {% post_filter "posts_by_topic" select_blog='default', overrideable=False, list_title='Posts by Topic',  max_links=5, expand_link_text='see all', filter_type='topic', label='Posts by Topic' %}
  </div>
</div>

<style>
/* Dropdown Button */
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/*Show the dropdown menu */
.show {display:block;}

</style>

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Without the added CSS, the list appears, with a max of 5 line items expanded (as noted in the added HUBL code).

The moment I add CSS, the "Categories" button appears (yay!), but then is no longer active. It's not toggling show/hide. I'm sure I am missing something somewhere. I called support and wasn't able to get help.

Occasional Contributor

Here's an update: I tried a different dropdown via W3 Schools and this one works, without JS.

<div class="dropdown">
  <button class="dropbtn">Categories</button>
  <div class="dropdown-content">
    {% post_filter "posts_by_topic" select_blog='default', overrideable='False', list_title='Posts by Topic',  max_links='1', expand_link_text='see all', filter_type='topic', label='Posts by Topic' %}
  </div>
</div>

<style>
/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>

 I'm still working on the dropdown styling, but at least this one works.