<div id="sidebar1" class="fluid-sidebar sidebar col-sm-4 border-left margin-bottom" role="complementary">
  <?php #if ( is_active_sidebar( 'sidebar1' ) ) : ?>
  <?php #dynamic_sidebar( 'sidebar1' ); ?>
  <!-- This content shows up if there are no widgets defined in the backend. -->
  <?php #endif; ?>
  <div id="categories-2" class="widget widget_categories">
	<h4 class="sidebar-heading"><span>Tópicos</span></h4>
		
    <div class="sidenav">
        <?php
        $categories = get_categories();
        foreach($categories as $category) {
            echo '<button class="dropdown-btn">' . $category->name . ' 
                    <i class="fa fa-caret-down"></i>
                  </button>';
            
            echo '<div class="dropdown-container">';
            $args = array('category' => $category->term_id, 'post_type' =>  'post'); 
            $postslist = get_posts( $args );    
            foreach ($postslist as $post) {
                echo '<a href="' . get_the_permalink() . '">' . get_the_title() . '</a>';
            }
            echo '</div>';
           /*echo '<div class="col-md-4"><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></div>';*/
        }
        ?>
    </div>
  </div>
</div>

<script>
//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}
</script>