Alternative to CSS Clip path for creating an accordion styling

I'm attempting to create an accordion that expands from the view shown below.

https://i.sstatic.net/D3LJP.png

To.

https://i.sstatic.net/cjG6z.png

It should open or close by clicking on a 'Project' thumbnail, which is displayed in the top left corner.

My current approach involves using clip-path property on the accordion div:

.accordion {
  width: 100%;
  height: 80vh;
  background-color: white;
  box-shadow: 10px 10px black;
  position: relative;
  -webkit-clip-path: polygon(25% 0, 82% 0, 100% 0, 100% 100%, 0 
  100%, 0 25%, 25% 25%, 25% 20%, 22.5% 17.5%, 25% 15%);
  clip-path: polygon(25% 0, 82% 0, 100% 0, 100% 100%, 0 100%, 0 
  25%, 25% 25%, 25% 20%, 22.5% 17.5%, 25% 15%);
}

However, I've encountered issues with the overlay appearing on top of the project thumbnail when it's expanded, as well as problems with responsiveness.

Is there a different method I can use to achieve this without using clip path? Or any suggestions to optimize my current approach?

htmlcssresponsive-design

Answer №1

Utilizing clip-path is perfectly fine, but it's important to establish variables and calculate them correctly rather than relying solely on percentages. Here's a helpful example:

Feel free to experiment with the variables and utilize Full page while adjusting the window size; the box dimensions should remain consistent.

Just a heads up, you can adjust the box dimensions using JavaScript like so: 

document.querySeletor('.accordion').style.setProperty('--width', '300px')
, etc.

body {
  background-color: salmon;
}

.accordion {
  /* the width of the box */
  --width: 200px;
  
  /* the height of the box */
  --height: 100px;
  
  /* the distance between the bottom of the box to the arrow center vertically */
  --arrow-dist: 20px;
  
  width: 100%;
  height: calc(100vh - 16px);
  background-color: white;
  box-shadow: 10px 10px black;
  position: relative;
  clip-path: polygon(
    var(--width) 0, 
    100% 0, 
    100% 100%, 
    0 100%, 
    0 var(--height), 
    var(--width) var(--height), 
    var(--width) calc(var(--height) - var(--arrow-dist) + 10px), 
    calc(var(--width) - 20px) calc(var(--height) - var(--arrow-dist)),
    var(--width) calc(var(--height) - var(--arrow-dist) - 10px)
  );
}
<div class="accordion"></div>

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

Ways to conceal a grid item in Material UI framework

My goal is to hide a specific grid item for a product and smoothly slide the others in its place. Currently, I am using the display:none property but it hides the item instantly. I have already filtered the products and now I want to animate the hiding of ...

javascriptcssmaterial-ui

Handlebars template engine does not support query parameters

Below is the code snippet I am working with: app.get("/editar-equipo?:id", (req, res) => { const equipos = obtenerEquipos() let equipoSeleccionado for(let i = 0; i < equipos.length; i++){ if(equipos[i].numeroId === ...

javascripthtmlnode.jsexpressexpress-handlebars

Attempting to alter the appearance of my validation control by implementing a custom style sheet theme

After naming a style sheet theme Basic and applying it to my web.config file, I created a Validator class in the css file. Utilizing the cssClass attribute with the Validator type, I successfully adjusted the font-weight property but struggled to change th ...

htmlcssasp.net

Assign the two values to variables in the CSS script

My challenge lies in passing two values to the CSS within the <style> tags. The values are: (background-color: --placeholder; color: --placeholdtext;). I am able to pass either one of the values successfully, but not both at the same time. When I cop ...

javascriptjquerycss

"What is the best way to transform tab navigation into a dropdown menu with the help

I have a collection of tabs currently on display. I am looking to transform them into a dropdown menu when the screen size changes, making them more responsive. Each set of tabs corresponds to different content. Despite trying various solutions found on s ...

javascriptjqueryhtml

Scalable vector graphics require adjustments in scaling and translation, with variations between Chrome and Firefox browsers

I have an SVG diagram with some yellow points represented as circles. <html> <title>Yellow circles</title> <body> <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" ...

htmlcssgoogle-chromefirefoxsvg

Strangely Bizarre CSS Quirk

At this website, there seems to be an issue with how the footer displays on Internet Explorer and certain older versions of Firefox. However, it appears perfectly fine on Firefox 3.6.13. Any suggestions on what could be causing this discrepancy? ...

htmlcss

Validation of forms using Javascript

I currently have an HTML form with JavaScript validation. Instead of displaying error messages in a popup using the alert command, how can I show them next to the text boxes? Here is my current code: if (document.gfiDownloadForm.txtFirstName.value == &ap ...

javascripthtmlforms

Making sure an image is visible using Webdriver

I'm facing an issue where an image disappears after reaching a certain width size. I'm unsure how to address this using Selenium. <img id="removeimg" class="col-md-5" src="images/abc-image.png" alt="abc"> Below is the corresponding CSS co ...

javahtmlcssselenium

The content within a container that has flex-grow: 1 is exceeding its bounds instead of being able to scroll

I am currently facing an issue with a container that is set to grow within a fixed size container and I need help figuring out how to make the content wrapper element scrollable. Specifically, the flex-grow container houses a div that is larger than the c ...

htmlcssflexbox

Striking a balance between innovation and backward compatibility in the realm of Web Design/Development

Creating websites is my passion, and I enjoy optimizing them for various platforms, devices, and browsers. However, lately, I've been feeling frustrated. I'm tired of facing limitations in implementing my creative ideas due to outdated technolog ...

javascripthtmlcss

Discover an improved method for creating a custom list style using Unicode Numbers in CSS

I am interested in creating a unique list type using Khmer Unicode Numbers ១ ២ ៣.. in a precise order. To achieve this, I attempted to utilize CSS pseudo-classes li:nth-child(1) li:nth-child(2) li:nth-child(3).. defined in my stylesheet as follows: ...

htmlcss

display and conceal a division by clicking a hyperlink

How can I make a hidden div become visible when clicking on a specific link without using jQuery? Javascript function show() { var a = document.getElementsByTagName("a"); if (a.id == "link1") { document.getElementByID("content1").style.v ...

javascripthtmlshow-hide

Keep the entire table in place as the user scrolls

I'm trying to create a sticky table that moves while scrolling the page. I currently have two tables, one after another. However, when I scroll the page, only the first table moves about 10px and then stops. My tables don't move at all. Can anyon ...

javascriptjqueryhtml

JavaScript issue: Submitting form does not trigger the associated function

I am currently in the process of learning JavaScript as part of my university course, and I have encountered an issue where my function is not being called. I am seeking to gain a better understanding of why this problem is occurring. Summary The situati ...

javascripthtmlforms

When the input field is cleared, JavaScript will not be able to recognize its contents

Having an issue with my function that fetches results, <script language="javascript"> function fetchResult(value){ url="ajax_fetch.php?st=usr&q="+value; ajax(url); } fetchResult(" "); </script&g ...

javascriptphphtml

Use a text link to upload a file instead of using an input field

While I've seen some discussions on this topic already, the conflicting answers have left me uncertain. Is there a foolproof method for triggering file upload without using an input field? Essentially, I'd like to create a div with an icon and te ...

cssfile-uploadinput

Updating an element within a for loop using Angular TypeScript

I'm trying to figure out how to update the value of an HTML DOM element that is bound from a TypeScript file in each iteration of a for loop, rather than at the end of the loop. I want to see all values as the loop is running. For example, imagine I ...

htmlangulartypescript

Unable to position divs next to each other in Firefox, yet successfully achieved in Chrome

I have successfully placed two divs side by side using the following markup, as shown in image 1, but this layout only works on Chrome. However, Firefox renders it differently as seen in Image 2. Is this a known issue that I overlooked? How can I resolve t ...

javascripthtmlcss

Establish the lowest possible height for Angular Material Expansion Panel Content

Is there a way to specify a minimum height for the content of an Angular Material expansion panel when it is open? I have searched for examples on setting the expandedHeight and collapsedHeight for the header, but not for the content itself. The Angular Do ...

cssangularangular-material