Can we show the dropdown with the active button?

Question

Can we show the dropdown with the active button?

Can someone assist me in transforming my sidebar buttons into dropdowns when viewed on a responsive layout? I'm looking for something similar to the sidebar (on the left) featured on this website:

If possible, I would like the dropdown to only display the active button initially, and then reveal the other options when the active button is clicked. Similar to the functionality on the website mentioned above, but in my case, the buttons are toggled as active upon clicking, rather than loading a new page.

Below are the links that need to be converted:

<div class="buttonRow">
        <ul class="btn">
        <label for="drop" class="toggle">Active Link Here</label> ***only visible in dropdown mode***
            <button class="btnAbt2"><li> Link 1 </li></button>
            <button class="btnAbt2"><li> Link 2 </li></button>
            <button class="btnAbt2"><li> Link 3 </li></button>
            <button class="btnAbt2"><li> Link 4 </li></button>
            <button class="btnAbt2"><li> Link 5 </li></button>
        </ul>
    </div>

I have successfully implemented adding an active class upon click. Now, I just need that active class to be the main text displayed in the dropdown menu.

For a visual reference, please see this image: here

Your help is greatly appreciated. Thank you!

javascript jquery html css drop-down-menu

Answer 1

Answer №1

Is this the solution you are aiming for?

$(document).ready(function(){

  $('.toggle').on('click', function(){
       $('button').toggle();
  });
  // declare a variable for text
  var $text;   
  $('.btnAbt2').click(function(){ 
       // fetch the text from the clicked link
       $text = $(this).text()
       $('.btnAbt2').removeClass('active'); $(this).addClass('active');
       // update the label text
       $('.toggle').text($text);
  });
 
});

.buttonRow {
  width: 100%;
}
.btn {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.toggle {
  width: 100%;
  padding: 5px;
  background: red;
  display: block;
}
button {
  width: 100%;
  padding: 5px;
  background: #CCC;
  display: none;
  border: 0;
}

@media screen and (min-width: 500px) {
    .toggle {
       display: none;
    }
    button {
       width: auto;
       float: left;
       display: block;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="buttonRow">
        <ul class="btn">
        <label for="drop" class="toggle">Active Link Here</label> 
            <button class="btnAbt2"><li> Link 1 </li></button>
            <button class="btnAbt2"><li> Link 2 </li></button>
            <button class="btnAbt2"><li> Link 3 </li></button>
            <button class="btnAbt2"><li> Link 4 </li></button>
            <button class="btnAbt2"><li> Link 5 </li></button>
        </ul>
    </div>

Answer 2

Is this the solution you are aiming for?

$(document).ready(function(){

  $('.toggle').on('click', function(){
       $('button').toggle();
  });
  // declare a variable for text
  var $text;   
  $('.btnAbt2').click(function(){ 
       // fetch the text from the clicked link
       $text = $(this).text()
       $('.btnAbt2').removeClass('active'); $(this).addClass('active');
       // update the label text
       $('.toggle').text($text);
  });
 
});

.buttonRow {
  width: 100%;
}
.btn {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.toggle {
  width: 100%;
  padding: 5px;
  background: red;
  display: block;
}
button {
  width: 100%;
  padding: 5px;
  background: #CCC;
  display: none;
  border: 0;
}

@media screen and (min-width: 500px) {
    .toggle {
       display: none;
    }
    button {
       width: auto;
       float: left;
       display: block;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="buttonRow">
        <ul class="btn">
        <label for="drop" class="toggle">Active Link Here</label> 
            <button class="btnAbt2"><li> Link 1 </li></button>
            <button class="btnAbt2"><li> Link 2 </li></button>
            <button class="btnAbt2"><li> Link 3 </li></button>
            <button class="btnAbt2"><li> Link 4 </li></button>
            <button class="btnAbt2"><li> Link 5 </li></button>
        </ul>
    </div>

Can we show the dropdown with the active button?

Answer №1

Similar questions

Attempting to save data to an external JSON file by utilizing fs and express libraries

Transferring a PHP variable from a dropdown menu to query the database

Tips for ensuring consistent display of UTF-8 arrow characters across different web browsers

Using SVG files as properties in React from a data.js file

Getting the value of a file input type on an Ajax or JQuery page using PHP

The error message "bind this is not defined in react" is displayed when attempting to read

Error: module 'next/react' not found

Issue with Three JS where the BoundingBox does not update correctly following rotation operations

What significance do the blank quotes hold in terms of value?

Is there a way to lock the eye icon in place within the password field using Vue.js?

Struggling to delete items from an array in react.js

Exploring the integration of foreign languages within C# code?

Enhancing functionality with jQuery: updating multiple input fields at

Splitting a loading button within post.map() in React for like/dislike functionality

Trouble fetching asynchronous data in Next.js Higher Order Component

Using jQuery AJAX to send a URL as a string parameter

Typescript: Add a new variable preceding a specified string

Do you know if there is a setting in prettier that allows line breaks to be preserved?

What is the best way to ensure the menu background aligns perfectly with the header in HTML/CSS?

The overflow:hidden feature doesn't appear to be functioning as expected