Replace button elements with option elements in a select dropdown on smaller viewports

A horizontal row of buttons (or links) looks great on large viewports but there’s no space for that on small (mobile) viewports. We could use CSS to simply stack the buttons but then it takes up too much vertical screen real estate.

Instead we can use Javascript to take the button elements and use them to build a new select element with corresponding option elements. This effectively turns the row of buttons into a dropdown menu which is much easier to use on a mobile device.

Todo: Combine this code along with the code found in the JS: Window resize event that watches if the viewport is less/greater than a specific value article that I also wrote today. But you’ll need to add additional code that changes the select and option elements back into button elements when the ‘greater’ viewport is triggered.

CodePen

JavaScript

const viewportWidth = window.innerWidth
if (viewportWidth <= 1024) {
	// Get the 
 element from the HTML markup
	const ulElement = document.querySelector('.partners__categories')

	// Create a new  element to replace the 

	const selectElement = document.createElement('select')

	// Loop through each 
 element within the 

	ulElement.querySelectorAll('li').forEach(li => {
		// Get the  element within the 

		const buttonElement = li.querySelector('button')

		// Create a new 
 element
		const optionElement = document.createElement('option')

		// Set the 'data-tab-id' and 'class' attributes on the  element
		optionElement.setAttribute('data-tab-id', buttonElement.getAttribute('data-tab-id'))
		optionElement.setAttribute('class', buttonElement.getAttribute('class'))

		// Set the text content of the  element to the text content of the  element
		optionElement.textContent = buttonElement.textContent

		// Append the  element to the  element
		selectElement.appendChild(optionElement)
	})

	// Replace the 
 element with the new  element
	ulElement.parentNode.replaceChild(selectElement, ulElement)
}





HTML



<ul class="partners__categories">
    <li><button data-tab-id="1" class="partners__category partners__category--active">Hotels</button></li>
    <li><button data-tab-id="2" class="partners__category">Resorts</button></li>
    <li><button data-tab-id="3" class="partners__category">Brands</button></li>
    <li><button data-tab-id="4" class="partners__category">Management Companies</button></li>
    <li><button data-tab-id="5" class="partners__category">Restaurants</button></li>
    <li><button data-tab-id="6" class="partners__category">Spas</button></li>
    <li><button data-tab-id="7" class="partners__category">Golf Courses</button></li>
</ul>

            

            March 15, 2023