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:

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

What is the best way to open the index.html file in electron?

I'm currently developing a cross-platform app using electron and Angular. As of now, the code I have for loading my index.html file looks like this: exports.window = function window() { this.createWindow = (theBrowserWindow) => { // Create ...

javascripthtmlelectronload

Ways to Fix the React Hydration Issue in Next.js

I have been encountering an issue with the error message "Hydration failed because the initial UI does not match what was rendered on the server." I am unsure of what is causing this error and would appreciate any insights or suggestions from others who ma ...

javascripthtmlreactjsnext.js

Issue with scrolling to the bottom of collapsed sections in Bootstrap

I have a bootstrap collapse panel and I've added a toggle link at the bottom to allow users to expand and collapse the content with a click. The Issue My problem arises when the menu expands, causing it to scroll all the way to the bottom of the pag ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the method for executing a server-side script without it being transmitted to the browser in any way?

Although the title may be misleading, my goal is to have my website execute a php file on the server side using arguments extracted from the html code. For example: document.getElementById("example").value; I want to run this operation on the se ...

javascripthtml

Is it possible to protect assets aside from JavaScript in Nodewebkit?

After coming across a post about securing the source code in a node-webkit desktop application on Stack Overflow, I began contemplating ways to safeguard my font files. Would using a snapshot approach, similar to the one mentioned in the post, be a viable ...

javascriptcssbinaryfont-facenode-webkit

Error: AsyncPipe received an invalid argument of type '[object Object]'. This has caused an error due to an invalid pipe argument

I'm currently working on developing a contact management system that includes CRUD operations using Angular 8 and Spring Boot. Every feature is functioning correctly except for the search functionality. My goal is to search for data based on a specifi ...

htmljsonangularspring-bootpipe

uncovering the precise text match with the help of Beautifulsoup

I am looking to retrieve the precise matching value of text from HTML using Beautiful Soup. However, I am encountering some similar text along with my desired exact match. Here is my code: from bs4 import BeautifulSoup import urllib2enter code here url="h ...

pythonhtmlbeautifulsoup

A website with two distinct pages, where only the first page is refreshed

I have split the content of my HTML page into 2 separate subpages, based on the references provided below: Multiple distinct pages in one HTML file This is how my code is structured: ... <script> function show(shown, hidden) { document.getEle ...

htmlcss

Transform Unicode characters into HTML using Qt

I am facing an issue with a particular string that includes Unicode characters and special symbols. The string, for instance, looks like this: SYMBOLSU+2510\n The string contains the Unicode character U+2510 and a new line symbol \n. I have a lo ...

htmlqtunicode

IOS Troubleshooting: Ineffectiveness of the Transform

So I am encountering a slight issue while trying to incorporate this code on iOS because I am not familiar with how iOS operates. On my website, I have implemented a circle that works perfectly fine on browsers and Android devices. However, when it comes t ...

ioscsstransform

Using @font-face to include several files for different font-weight variations

I have a collection of font files that I want to assign to specific font weights. @font-face { font-family: "custom-font"; src: url("font300.eot"); src: url("font300.eot?#iefix") format("embedded-opentype"), url("font300.woff2") format ...

cssfontsfont-face

Is there a way to work around the CORS policy in order to fetch data from URLs?

I have been developing a tool that can analyze URLs from an uploaded CSV file, search the text content of each URL, and calculate the total word count as well as the occurrences of "saas" or "software". The goal is to generate a new CSV file with the origi ...

javascripthtmlcsscsvcors

Selenium Python can be used to save a web page as a

Trying to print a webpage as a PDF with headers and footers to mimic the output from Google Chrome. Any suggestions? Experimented with PhantomJS but couldn't get it to include headers and footers. from selenium import webdriver import selenium def ...

pythonseleniumpdfhtml

Slideshow elements removed

I attempted to remove my links individually from the div id="wrapper", but unfortunately have encountered an issue while doing so: window.onload = function () { setInterval(function () { var wrapper = document.getElementById("wrapper"); var my_l ...

javascriptjqueryhtmlslideshowremovechild

Specify padding or margin for all sides in a single line of XML code

Is there a way to set the padding or margin for all four sides in xml with just one line, similar to how we can do it in css? For instance, in css: padding: 1px 2px 3px 4px; Is there an equivalent method in xml for accomplishing this? ...

androidcssxml

A gap only appears in the drop-down navigation when the page is scrolled

After finally completing my first website, I encountered a frustrating issue. When scrolling down the page, a gap appears in the navigation bar, making it impossible to access the dropdown menus. I've been struggling to fix this problem on my own. Any ...

htmlcssnav

What is the best way to showcase the final div at the top with CSS?

I'm working with 4 separate divs, with the last one acting as a footer. Is there a way to position this last div at the top using CSS? ...

csslayouthtml

jquery slider for inputting phone number on a mobile device

I am currently working on enhancing the user interface by implementing a feature where users can select a mobile number using a slider. The idea is that the user will choose a digit between 0 and 9 using the slider, then confirm their selection by pressing ...

jqueryhtmlcsseventsslider

Utilizing HTML snippets for AJAX integration

Let's dive in, I may be completely off track here. I am currently working with Wordpress. On a page I am creating an HTML select menu (Main Menu) with options that correspond to each page on the site. This menu is visible on the page. In addition, ...

phphtmlajax

What is the best method for converting Unix time to a readable date

<el-table-column label="Time Created" prop="create_time"></el-table-column> https://i.stack.imgur.com/aoLjf.png The timestamp data from the backend is in milliseconds format (e.g. 1527150668419) and is stored as create_time property in this.i ...

javascripthtmlunixunix-timestamp