Sketch lines within the accordion

In my design, I have nested accordions and I am trying to create a graphical representation with vertical and horizontal lines connecting the elements.

Here is the basic structure:

<div id="accordion3" class="collapseblock">
  <div class="cardsmall">
    <div class="cardsmall-header">
      <span class="arrowed" id="headingGeneral" data-toggle="collapse" data-target="#collapseGeneralTab" aria-expanded="false" aria-controls="collapseGeneralTab">
                                        Test1
                                    </span>
    </div>
    <div id="collapseGeneralTab" class="collapse" aria-labelledby="headingGeneral" data-parent="#accordion3">
      <div class="cardsmall-content">
        Example1
      </div>
    </div>
  </div>
  <div class="cardsmall">
    <div class="cardsmall-header">
      <span class="arrowed" id="headingCurrency" data-toggle="collapse" data-target="#collapseCurrency" aria-expanded="false" aria-controls="collapseCurrency">
                                        Test2
                                    </span>
    </div>
    <div id="collapseCurrency" class="collapse" aria-labelledby="headingCurrency" data-parent="#accordion3">
      <div class="cardsmall-content">
        <div id="accordion4" class="collapseblock">
          <div class="cardsmall">
            <div class="cardsmall-header">
              <span class="arrowed" id="headingOffers" data-toggle="collapse" data-target="#collapseOffers" aria-expanded="false" aria-controls="collapseOffers">
                                                        Test2.1
                                                    </span>
            </div>
            <div id="collapseOffers" class="collapse" aria-labelledby="headingOffers" data-parent="#accordion4">
              <div class="cardsmall-content">
                Example2.1
              </div>
            </div>
          </div>

          <div class="cardsmall">
            <div class="cardsmall-header">
              <span class="arrowed" id="headingPricing" data-toggle="collapse" data-target="#collapsePricing" aria-expanded="false" aria-controls="collapsePricing">
                                                        Test2.2
                                                    </span>
            </div>
            <div id="collapsePricing" class="collapse" aria-labelledby="headingPricing" data-parent="#accordion4">
              <div class="cardsmall-content">
                Example2.2
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Visit this link for a visual representation on JSFiddle.

To achieve a graphical layout like in the example image below, follow the guidelines provided in the link above:

https://i.sstatic.net/6q2tp.png

htmlcssbootstrap-4

Answer №1

Here is an innovative approach utilizing background and pseudo-elements. It may require some tweaking for multiline content or nested elements.

.cardsmall {
  background: linear-gradient(#000,#000) 5px calc(100% - 16px)/2px calc(100% - 40px) no-repeat;
  display: table;
  margin-bottom: 3px;
  margin-left: 20px;
  margin-top: 10px;
}
.cardsmall .cardsmall {
  margin-top: 0;
}
 .cardsmall {
  position:relative;
}
.cardsmall  .cardsmall:before {
    content: "";
    position: absolute;
    top: 13px;
    right: calc(100% + 3px);
    width: 30px;
    height: 2px;
    background: #000;
}
.cardsmall .cardsmall:last-child:after {
    content: "";
    position: absolute;
    top: 15px;
    right: calc(100% + 5px);
    width: 30px;
    height: 100vh;
    background: #fff;
}
.cardsmall-header .arrowed {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.cardsmall-header .arrowed:after {
  content: "\f078";
  display: inline-block;
  font-family: 'FontAwesome';
  position: relative;
  right: 0;
  transition: all 0.3s;
}

.arrowed[aria-expanded="true"]:after {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.cardsmall-header {
  border-radius: calc(.25rem - 1px);
}

.cardsmall-content {
  padding: 10px 5px 5px 20px;
  background:linear-gradient(#000,#000) 5px 23px/12px 2px no-repeat;
      overflow: hidden;
}

.collapseblock {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div id="accordion3" class="collapseblock">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="cardsmall">
    <div class="cardsmall-header">
      <span class="arrowed" id="headingTest1" data-toggle="collapse" data-target="#collapseTest1Tab" aria-expanded="false" aria-controls="collapseTest1Tab">
Test1
</span>
    </div>
    <div id="collapseTest1Tab" class="collapse" aria-labelledby="headingTest1" data-parent="#accordion3">
      <div class="cardsmall-content">
        Example1
      </div>
    </div>
  </div>
  <div class="cardsmall">
    <div class="cardsmall-header">
      <span class="arrowed" id="headingTest2" data-toggle="collapse" data-target="#collapseTest2" aria-expanded="false" aria-controls="collapseTest2">
Test2
</span>
    </div>
    <div id="collapseTest2" class="collapse" aria-labelledby="headingTest2" data-parent="#accordion3">
      <div class="cardsmall-content">
        <div id="accordion4" class="collapseblock">
          <div class="cardsmall">
            <div class="cardsmall-header">
              <span class="arrowed" id="headingTest21" data-toggle="collapse" data-target="#collapseTest21" aria-expanded="false" aria-controls="collapseTest21">
Test2.1
</span>
            </div>
            <div id="collapseTest21" class="collapse" aria-labelledby="headingTest21" data-parent="#accordion4">
              <div class="cardsmall-content">
                Example2.1
              </div>
            </div>
          </div>
          <div class="cardsmall">
            <div class="cardsmall-header">
              <span class="arrowed" id="headingTest22" data-toggle="collapse" data-target="#collapseTest22" aria-expanded="false" aria-controls="collapseTest22">
Test2.2
</span>
            </div>
            <div id="collapseTest22" class="collapse" aria-labelledby="headingTest22" data-parent="#accordion4">
              <div class="cardsmall-content">
                Example2.2
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Below is the pertinent CSS that we added:

.cardsmall {
  background: linear-gradient(#000,#000) 5px calc(100% - 16px)/2px calc(100% - 40px) no-repeat;
}
.cardsmall .cardsmall {
   margin-top: 0;
}
.cardsmall {
   position:relative;
}
.cardsmall  .cardsmall:before {
    content: "";
    position: absolute;
    top: 13px;
    right: calc(100% + 3px);
    width: 30px;
    height: 2px;
    background: #000;
}
.cardsmall-content {
  background:linear-gradient(#000,#000) 5px 23px/12px 2px no-repeat;
  overflow:hidden; /*needed to hide the overflow of the after element below*/
}

/*This is to hide the line when the last child is expanded*/
.cardsmall .cardsmall:last-child:after {
    content: "";
    position: absolute;
    top: 15px;
    right: calc(100% + 5px);
    width: 30px;
    height: 100vh;
    background: #fff;
}
/**/

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

Content in the div stretches when viewed on a mobile device

I have created a responsive page that is centered, but when viewed on a mobile window, I want the text to stretch and remove any white space on the sides. How can I achieve this using Bootstrap 4? hr { border: 0; height: 1px; ba ...

htmlcssbootstrap-4

The animated image gracefully glides down the webpage accompanied by an h3

How can I align an image and h3 tag side by side without the image sliding down? <img src="..." alt="..." /><h3>Shopping Cart</h3> I need them to be next to each other but the image keeps moving down. Any suggestions on how to fix this? ...

htmlcssxhtml

After making an Ajax call using AngularJS in a PHP file, I expected to receive only a success or fail message. Instead, I received the entire HTML page code along

After making an Ajax call using AngularJS in a PHP file, I expected to receive only a success/fail message. However, I ended up receiving the full HTML page code along with tags. Here is my AngularJS code: $http.post('ajax_Location.php',{ &apos ...

javascriptphpjqueryhtmlangularjs

Appear and disappear div

I am seeking to achieve a specific goal: I want to fade in a div with text after a certain number of seconds, then fade it out. I also want to repeat this process for 4 other divs, ensuring that they do not interfere with each other by appearing while the ...

javascriptjqueryhtml

Safari's mysterious vanishing act: Elements go missing in Vue.js

Has anyone encountered this issue before? I am using a vue 2 template with vuetify 2 for rendering, and I have noticed that in Safari only, the buttons on the page flash upon loading and then disappear. Upon inspecting the DOM, I can still see the button ...

javascriptcssvue.jsvuetify.js

Struggling to set up the Sneat HTML theme - I'm unable to configure the config.js file

I recently began using the Sneat Theme for my project and everything was going smoothly until I tried to adjust the color scheme across the entire project. It appears that despite following the instructions in the config.js file, the changes were not takin ...

cssuser-interfacethemes

Changing the appearance of a website by switching CSS stylesheets according to the size of the browser

Trying to build two versions of my website: one for mobile devices or small browsing windows, and another for large browser windows. Looking to link HTML to different style sheets based on browser size. Current attempt in code only addresses total screen ...

javascripthtmljquerycss

Differentiating between Chrome and Safari user-agent strings using CSS only (without JavaScript)

Are there specific CSS selectors that can target Safari and Chrome exclusively? When attempting to target only Safari, I initially tried the following selector, but it seems to also target Chrome: html[data-useragent*="Safari"] { [...] } ...

htmlcssgoogle-chromesafari

Using XSL to convert XML to HTML, extracting specific elements from various structures based on the shared element value

As a newcomer to XML and XSLT, I have been searching for solutions on Meunchian grouping without much success. The challenge lies in transforming a large XML file, exported from a database with invoicing information, into HTML using XSLT (1.0) with Saxon. ...

htmlxmlxslttransformation

What is the best way to horizontally align a div within a parent div?

I'm having trouble centering the red div containing three child elements (h1, h3, and button) within a green container div using CSS. I initially attempted to center the red div vertically and horizontally on its own, but after some research, I learne ...

cssflexboxcentering

What are some techniques for creating a distinct layout using a list of items with CSS grid?

My goal is to create a unique layout for a list of posts using an array. The layout involves different columns rather than simply wrapping them into rows outside of the while loop. I have almost everything working except for the section inside the red bor ...

htmlcsswordpresswhile-loopcss-grid

Guide to dynamically generating checkboxes or multi-select options in ASP.NET MVC 4

Within this project, we have implemented two separate lists - one for the dealer and another for their products. Currently, when selecting a specific dealer, all associated products are returned using JavaScript (Json). Utilizing Html 5: @using (Html.Be ...

javascriptjsonhtmlc#-4.0asp.net-mvc-4

Tips for customizing the background color of hyperlinks

Hello, I am trying to figure out how to create a hyperlink with alternating background colors. Can anyone guide me on achieving this? <div class="left_column"> <div class="category"> <p>Category</p> </div> <ul ...

javascripthtmlcss

MDL Tab loading Problem

When visiting my website at this link, which is powered by MDL from Google, there is a troublesome issue that occurs. The #harule tab briefly appears before disappearing. This tab should actually be hidden on the page until a user clicks on the harule tab ...

javascriptjqueryhtmlcss

Flexbox implemented for responsive Three Column Layout

Recently, I set up a small poll with three layout columns. On Desktop, everything looks great but the problem arises when viewing it on a mobile screen. People are displayed one under the other followed by the questions. I want to rearrange it so that each ...

javascripthtmlcssbootstrap-4flexbox

Error: Unable to import Scss font file into Angular application

My font won't load and isn't displaying on the webpage. I've tried numerous solutions, but this stubborn font just won't show up. Appreciate any help in advance! fonts.scss : @font-face { font-family: Montserrat, sans-serif; src: u ...

htmlangularsassfontsangular-json

Apply a 100% width to an image within an animation

Trying to make an image swapper using only CSS has been a smooth process so far with the animation feature effortlessly handling the image swaps. However, the challenge arises when the images themselves are not the perfect size and I'm using a div wit ...

htmlcsscss-animations

Highlight text when the user is scrolling the page - using JQUERY

Can anyone suggest a way to dynamically underline text as the user scrolls down a webpage? The underline should only be visible while the user is scrolling. I've experimented with animate.css and other plugins, but haven't been able to achieve th ...

javascriptjqueryhtmlcss

How to align horizontal UL navigation utilizing CSS sprite background

After numerous attempts, I am struggling to center a 4 element horizontal list using a sprite image as the li background within the footer div. My CSS and HTML code is as follows: #footer-share-links { width:400px; text-align:center; margin:10 ...

htmlcss

Connect the visibility of one object to the visibility of another object

How can I make DOM-element a visible when DOM-element b is visible, and hidden when b is hidden using jQuery? I'm seeking a solution to achieve this effect. Is there a way to accomplish this with jQuery? Thank you in advance! To clarify my question ...

javascriptjqueryhtml