Is there a way to make an expandable menu using just HTML5 and CSS3?
I am interested in showing only 4 menu items with a "view all" option that, when clicked, expands all list items. Can this be achieved without any JavaScript?
Is there a way to make an expandable menu using just HTML5 and CSS3?
I am interested in showing only 4 menu items with a "view all" option that, when clicked, expands all list items. Can this be achieved without any JavaScript?
There are numerous methods to achieve this! One example is outlined below. The HTML structure involves a div that can be clicked, revealing a hidden div underneath using the :target pseudo-selector.
<div class="accordion">
<div id="one" class="section">
<h3>
<a href="#one">Heading 1</a>
</h3>
<div>
<p>Content</p>
</div>
</div>
<div id="two" class="section">
<h3>
<a href="#two">Heading 2</a>
</h3>
<div>
<p>Content</p>
</div>
</div>
</div>
.accordion h3 + div {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.accordion :target h3 + div {
height: 100px;
}
.accordion .section.large:target h3 + div {
overflow: auto;
}
I've created a working Fiddle so you can see it in action: Take a look!
One effective and straightforward solution using the <details /> tag (source: mdn - the Details disclosure element)
details {
border: 1px solid #aaa;
border-radius: 4px;
padding: 0.5em 0.5em 0;
}
summary {
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
}
details[open] {
padding: 0.5em;
}
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
}<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>My unique method using a touch of JavaScript and the magic of radio inputs. No delays, glitches, or dropped animation frames. Plus, it adapts seamlessly to dynamic content heights
document.querySelectorAll('.accordion .inner').forEach(p => {
p.style.marginTop = '-'+p.offsetHeight+'px';
});/* Custom styling */
body {
width: 500px;
}
label {
display: block;
cursor: pointer;
background: #ccffff;
cursor: pointer;
box-sizing: border-box;
padding: 20px;
font-size: 20px;
}
label:hover {
font-weight: bold;
}
p {
margin: 0;
padding: 0 20px;
}
.content {
overflow: hidden;
}
.inner {
transition: all 0.3s ease-in-out;
margin-top: -20000px;
}
input:checked ~ .content .inner {
margin-top: 0 !important;
}<div class="accordion">
<div class="item">
<label for="state1">Button</label>
<input type="radio" id="state1" name="state" value="1" hidden>
<div class="content">
<div class="inner">
<p>Unique text goes here...</p>
</div>
</div>
</div>
<div class="item">
<label for="state2">Button2</label>
<input type="radio" id="state2" name="state" value="2" hidden>
<div class="content">
<div class="inner">
<p>Unique text goes here...</p>
</div>
</div>
</div>
</div>Is there a way to retrieve the instance name of my class without passing it as a parameter? I have tried looping through all global objects and comparing them with the this pointer. This method works in Chrome and Firefox, but not in Internet Explo ...
Recently diving into the world of HTML, I find myself tackling CSS tasks to enhance the look of my website. It's been interesting experimenting with different styles for each CSS code snippet. Each paragraph with a unique ID is getting its own special ...
Currently in the process of developing a web application, I am facing challenges with my CSS panels constantly shifting around unexpectedly. These panels feature an image with a 4:3 aspect ratio along with a description section. While they appear stable ...
Is there a way to customize the color border of an SVG icon within a button to match the text of the button? My code snippet can be found on JSFiddle, along with my usage of Bootstrap: JSFiddle @import 'https://maxcdn.bootstrapcdn.com/bootstrap/4 ...
Here's a question about buttons: <p> Upload:<br> <br> <input type="file" name="datafile" size="40"> </p> Can a button be created where users can paste a URL of an image from the web? For example, I would lik ...
My HTML form includes a text area and a functionality to save the data into a database upon submission. The issue arises when the saved data is retrieved from the database, as the original formatting of the text gets altered. For instance: "This is a text ...
While working on a webpage using HTML, CSS, and Angular.js, I encountered an issue where the page content would not display properly upon loading. The objective was to show selected content based on user choices from a dropdown menu. Although the filtering ...
I am encountering an issue with my jQuery getJSON method when trying to pass data to PHP. Strangely, I am unable to pass a variable. In another part of my code, passing the variable works fine. Additionally, hardcoding the string or using a valid variable ...
The React code doesn't seem to be working on localhost 3000 despite my numerous attempts. class Counter extends Component { state={ counters:[ {id : 1, value: 0}, {id : 1, value: 0}, {id : 1, value: 0}, ...
Looking to continuously move the .popup class left and right by clicking buttons for left and right movement. Here is the js fiddle link for reference. This is the HTML code structure: <button class="right">Right</button> <button class="l ...
I'm currently working on creating a modal that includes a button and an input field for manually entering a number. Once the number is submitted, it should appear in the input field outside the modal and be available for various functions such as sett ...
I'm experiencing a problem with my email messages not reading the CSS styles, regardless of whether I use inline CSS or not. I have tried everything but still can't figure out the issue. Can anyone assist me? $firstname = $row['firstname&ap ...
Greetings to everyone! I have dedicated my entire evening to understanding how to implement the (Math.floor(Math.random()) function as the coordinates for the .fillRect method on an HTML canvas element. Despite searching through this website and various ...
Seeking assistance with a puzzling situation I encountered. My website features a form for administrators to submit user information, including links. The challenge lies in the uncertainty of how many links will be submitted - it could range from 5 to 35. ...
Looking to create a sticky footer using an external footer file? Including a footer.php file in the main page and making it sticky can be achieved by utilizing the wrapper tag strategy, demonstrated below in the example codes. <div class="wrapper"> ...
I have recently come across a fascinating effect where an image glows up when the mouse hovers over it. This is not your typical border glow, but rather a unique enhancement of colors within the image itself. I discovered a library called Pixastic that can ...
Hey there! I'm working on a responsive website and facing an issue with image resizing. When I shrink the screen size, the images also shrink along with it. How can I set a fixed width for the images? I tried switching from rem to px but that didn&apo ...
How do I adjust the size of buttons in my HTML and CSS elements based on screen size? Currently, when I resize the window, the buttons disappear instead of resizing to fit into a column layout. Here is my CSS code snippet: /* grid */ .col-1of1 { width: ...
My grid has a size of 300px. When there are more than 10 records, a vertical scroll bar appears, which is fine. However, at the same time, a horizontal scroll bar also appears, which I do not want to display. My CSS class for vertical scrolling is: .vstyl ...
Currently, I am in the process of developing a signup page using bootstrap. To validate my form, I have integrated the plugin. Despite all validations being successful, an issue arises when I attempt to submit the form - the submit button is disabled and ...