What is the proper way to utilize CSS animation delays in order to design a collapsible HTML container?

I'm trying to implement responsive CSS animation delay to create an accordion effect when a user clicks on an arrow associated with a table, all without using JavaScript and only utilizing HTML/CSS.

Check out the mobile view in action here: https://web.archive.org/web/20190523104045/http://responsiveemailpatterns.com/patterns/accordions/full-to-accordion.html

Visual representation of what I aim to achieve: https://i.sstatic.net/rHOwE.jpg

I've marked the CSS block and HTML section with ACCORDION to highlight my attempt to correctly code it. However, clicking on the arrow doesn't collapse the container as desired in the image. Is there a way to fix this code without resorting to JavaScript or JQuery?

html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
.msofix {mso-table-lspace: -1pt; mso-table-rspace:-1pt}
body{padding:0; margin:0;}   

@media only screen and (max-width: 480px) {
div[class=divSecMobile]{
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: inherit !important;
  line-height: 23px !important;
}

<div>[...]</div>

htmlcss

Answer №1

After reviewing the template you are attempting to utilize, it appears that there is a missing ID on one of the table cells. Allow me to clarify how this collapsible feature functions:

In CSS, the :target selector is activated when the element is targeted by a URL. For example, if you have a <h1 id="someId"> on the page and you add #someId to the URL in the browser, you can apply styling to the h1 using h1:target { color: red; }.

This method is cleverly utilized in this collapsible feature to achieve the following:

  • The anchor tag contains a href with: #story1
  • The parent <td> of the anchor has an ID of story1
  • When you click/tap the plus sign (inside the anchor), the <td> becomes the target
  • td:target is used to reveal the previously hidden content

Upon examining your code snippet, it seems that the parent of the anchor is missing the required ID, which prevents it from becoming the target as intended.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for removing empty space caused by the iPhone notch on your webpage

Hey there, I'm struggling to remove the blank space on my iPhone with a notch at the top of the screen. Do you have any advice on how to change the background color from the default white? My website is live and you can check it out at . I've att ...

htmlcssiphonenext.jsfrontend

Is there a simple and efficient method to transition the loading of a regular website to AJAX for the entire site?

Is it feasible to easily and quickly change all links on a website to load the URL that the user clicked via AJAX, rather than refreshing the webpage? My website currently has standard links, but in order to create a mobile application for iPhone, I need ...

javascriptajaxhtmlhtml5-history

Tips for showcasing heading and paragraph elements side by side in css?

I have a block of HTML code that includes a heading and two paragraphs: <div class="inter"> <h4>Note</h4> <p>To add/remove a dependent or to modify your spouse's insurer information, go to the My Life Events section and foll ...

htmlcss

Importing pixi-sound in the right way for PIXI JS

I have a question regarding the proper way to import pixi-sound into my project. I am facing an issue with the following code snippet: import * as PIXI from "pixi.js"; import PIXI_SOUND from "pixi-sound"; const EFFECT_SOUNDS = [...list of music] for (le ...

javascripthtmlimportpixi.js

Discover the Magic Trick: Automatically Dismissing Alerts with Twitter Bootstrap

I'm currently utilizing the amazing Twitter Bootstrap CSS framework for my project. When it comes to displaying messages to users, I am using the alerts JavaScript JS and CSS. For those curious, you can find more information about it here: http://get ...

javascriptjquerycsstwitter-bootstrapalert

The ion-datetime in Ionic 4 ensures that the floating label always remains visible, even when the input

When an ion-datetime field in Ionic 4 has no value, the label always floats as shown below. Here is my code snippet: <form [formGroup]="statusHandlerForm"> <ion-item class="input-container " align-items-center no-padding> <ion-la ...

javascriptcssangularionic-frameworkionic4

Firefox's keyup event

Is it possible to detect a keypress using the jQuery keyup function, as I am facing an issue where it works in Chrome, Edge, IE, and Opera but not in Firefox. $(".textfield").contents().keyup(function(evnt) { document.getElementById("btn_save").style. ...

javascriptjqueryhtmliframejquery-events

It appears that WebClient.DownloadString has a tendency to alter certain aspects of the HTML code retrieved from an external website

I have a website built with ASP.NET (.aspx) that I access from an ASP.NET MVC 4 mobile site (.cshtml) to retrieve its HTML response string. Both sites are hosted on a Windows Server 2008 R2 system and were developed using VS2010 Professional. -When direct ...

asp.nethtmlwebclient

Using jQuery and JSON data to dynamically populate a second dropdown menu with filtered options

I am working on a form with two drop-down menus and a text box. The first drop-down contains static values, while the second drop-down is populated dynamically from a JSON array. My goal is to filter the options in the second drop-down based on the selecti ...

javascriptjqueryhtmljson

Automation of transmitting HTML data to a database

After dabbling in web development for some time, I've come to realize that transferring data between an HTML form and a database can be quite challenging. My usual solution involves using an AJAX call to a PHP script, as illustrated in the image below ...

htmlajaxdatabasexmlhttprequesthttprequest

What is the method for adjusting the right padding of the MUI Autocomplete Input field?

When using MUI, it automatically adds 65px of right padding to the outlined Autocomplete box. However, for my specific needs, I want to change this right padding to 50px. Despite my efforts to override the padding, I have been unsuccessful so far. You can ...

htmlcssmaterial-ui

Button color changes upon submission of form

Can anyone help me figure out how to change the color of a submit button after a form submission using Twitter Bootstrap 3? I have a form with multiple buttons serving as filters for my product page, but I can't seem to change the color of the selecte ...

javascriptphpjqueryhtmlinput

Navigation Menu in Motion

I'm currently working on a website for my F1 in Schools team and I'm looking to implement a feature where the button in the navigation bar changes its background color and font color when that section of the page is active, even while scrolling o ...

javascripthtmlcssnav

Adding space between the cells on the far left and far right of the table and the border

I need some advice on creating a table in HTML where the borders of the leftmost and right most cells do not extend all the way to the edges of the table. Here's an example: | ____ | In this example, the top border of the cells is continuous within ...

htmlcssxhtml

Position an image in the center and add a div below it

I am seeking guidance regarding two specific questions. My objective is to showcase an image in its true size while positioning it at the horizontal center of the screen (not the exact center), followed by a div containing text directly underneath the imag ...

htmlcss

Having issues with Attributes.Add() function on ASP.NET platform

After adding CSS through code behind in asp.net on page_load, it works perfectly on my local environment but fails to work on the server. Here is the code snippet for your reference: protected void Page_Load(object sender, EventArgs e) { string selec ...

c#cssasp.net

Having difficulty executing a function inside a JavaScript file

Within my index.php file, the following lines of code are present: <!doctype html><html class=""><head><title>a title</title> <link href="_css/boilerplate.css" rel="stylesheet" type="text/css"> <script type="text/jav ...

javascriptjqueryhtmlpopupcall

Show an SVG overlay when hovering over an image

Is there a way to create a hexagon shape around an image when it is hovered over using CSS only, even if the image itself has a circular border-radius of 50%? ...

javascriptcss

Spacious Bootstrap layout - 3 columns with the center column taking up the most space

I am in the process of designing a layout with 3 columns aligned in the same row: The first column should adjust to its content, such as a picture or avatar The third column should also adjust to its content, like a date or time. Meanwhile, the second col ...

htmlcssbootstrap-5

What is causing my HTML to not recognize my Angular JS code?

Trying to dive into Angular JS, I wrote a small piece of code but for some reason, the HTML is not recognizing Angular JS. This is my index.html file: <!DOCTYPE HTML> <html ng-app="store"> <head> <link rel="stylesheet" type=" ...

javascripthtmlangularjs