The border on the right side of the accordion does not continue down

After creating an HTML page with an accordion in one div and a menu in another, I added a simple border styling to the right side of the menu using CSS properties like height, border-right-width, border-right-style, and border-right-color.

height:100%;
 border-right-width:2px;
 border-right-style:solid;
 border-right-color:#4875B4;

Although everything seemed to be working fine, I noticed that when I expanded an accordion header, the border did not expand along with it (despite setting the height to 100%). The reason for this is that I cannot apply the border style directly to the accordion itself due to the code hiding it by default.

http://jsfiddle.net/ZxnAd/ JSFiddle To see the issue with the border not extending when expanding "section 3" on the accordion, please visit the provided link.

jquerycssaccordion

Answer №1

If you're looking to solve your issue, there are a couple of methods that can help.

Option 1:

You can eliminate the right border from #menus and add a left border to div.accordion like this:

.accordion {border-left:2px solid #F00;}

Check out the demonstration on this Fiddle link.

Option 2:

Alternatively, using JavaScript, you can calculate the height of the accordion and apply that same height to div#menus when the click event occurs on accordion divs. Here's an example code snippet:

$('div#menus').height($('div.accordion').height());

However, keep in mind: implementing the second approach might lead to complications that require changing your HTML structure.

Therefore, I believe sticking with the first method would be the best solution for your situation.

Answer №2

I trust that this is what you were looking for in your query:

Swap out your current CSS with the following:

.accordion {
 position:absolute;
 color: #AAA;
 //title-background:black;
 top:0;
 left:195px;
 padding: 0px;
 width:100%;
}

This will extend the border to cover 100% of the div's right side.

To add a border around the menus, use the code snippet below:

#menus{
 position:absolute;
 top:2px;
 left:0;
 width:190px;
 height:100%;
 border-style:solid;
 border-right-width:2px;
 border-right-style:solid;
 border-right-color:#119900;

}

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

Spinner displayed upon task completion

Currently, I am developing a project using Spring Boot. I would like to display a spinner on my page to indicate that a task involving heavy calculations is in progress. Even though the page may take up to 5 minutes to load, my spinner only appears for t ...

javascriptjqueryajax

JavaScript's addition of CSS animation not functioning as intended

I am facing an issue with a web page utilizing Bootstrap 5. The webpage consists of one element stacked on top of another. My goal is to fade-out the top element after a certain period. Here is what I have tried: HTML <div id="host" class=&qu ...

css

Steps for updating a text section beneath a carousel

I'm looking to enhance my webpage with a bootstrap carousel, which is pretty standard. However, I want the content under each slide to change dynamically, but I'm struggling to make it work. As a newbie, I could use some guidance. I've atte ...

javascriptjqueryhtmlcsstwitter-bootstrap

Error encountered: Jquery counter plugin Uncaught TypeError

I am attempting to incorporate the JQuery Counter Plugin into my project, but I keep encountering an error: dashboard:694 Uncaught TypeError: $(...).counterUp is not a function <!DOCTYPE html> <html lang="en"> <head> <script src ...

javascriptjquery

employing rowspan functionality within a JavaScript application

How can I achieve a table layout where the first two columns are fixed for only one row and the remaining rows are repeated 7 times? Additionally, is there a way to make the bottom border of the last row thicker? Check out the expected table for reference. ...

javascripthtmlcss

When using Ruby and Rack on Heroku to serve a static site, the CSS styling may not be

Trying to deploy a static site consisting of HTML, CSS, font, and image files with Ruby Rack has been a bit challenging. While the HTML displays perfectly in Chrome when running it locally, the CSS assets do not seem to be loading or being applied to the H ...

htmlcssruby-on-railsrubyheroku

jquery to create a fading effect for individual list items

I have a group of items listed, and I would like them to smoothly fade out while the next one fades in seamlessly. Below is the code I've been working on: document.ready(function(){ var list_slideshow = $("#site_slideshow_inner_text"); ...

javascriptjquerycsslist

Restrict the height of a division based on the adjacent division

Within the parent div, I have two child div elements that are meant to be positioned side by side. The first element contains an image which loads dynamically, meaning its height is unknown in advance. I want the parent div's total height to match the ...

htmlcssimageheightauto

Ways to eliminate the excess space surrounding an Image border

I am looking to position the image at the top right corner of the screen. body{ font-family: 'Roboto', sans-serif; font-weight: 300; background: #822B2B; color: #ffffff; overflow: hidden; } #showcase{ display: flex; justify-content: center; al ...

htmlcssimagebackgroundspace

issue with a non-functional sticky sidebar within a Tailwind post

I am trying to create a layout similar to this website. One of the key features I want to replicate is the sidebar that follows you as you scroll. Here is the code I have, but unfortunately, I can't seem to get it to work: <template> <di ...

cssvue.jsnuxt.jstailwind-css

Enhance the appearance of a button in Rails by incorporating custom styles or images

I am currently working with Rails and I am curious if there are any simple ways to enhance the appearance of the button_to control. Is it possible to style the <%= submit_tag 'Log in' %> or <%= button_to "Show Me", {:controller => ...

ruby-on-railscssstylesheet

Issue regarding Jquery widget

I am working with a widget that looks like this $.widget("ui.myWidget", { //default options options: { myOptions: "test" }, _create: function () { this.self = $(this.element[0]); this.self.find("thead th").click(fun ...

javascriptjqueryjquery-uijquery-pluginsjquery-widgets

Guide on utilizing ajax to post data when the URL parameter changes, all without refreshing the page

As the URL parameter changes, the values in my HTML also change. I am passing these values to a JSON file, but they are getting erased when the page refreshes due to the post request. I have attempted to use event.preventDefault(), however, it seems to n ...

javascriptphpjqueryajax

Opt for utilizing functions instead of $(document).ready in jQuery

I have encountered an issue while using the Piety plugin on a website that showcases leaderboard profiles. It seems that the $(document).ready function is triggered before all the elements to which Piety is applied have fully loaded, resulting in discrepan ...

jquery

Designing an image transformation page by segmenting the image into fragments

Does anyone have insight into the creation process of websites like this one? Are there any plugins or tools that can assist in building something similar? ...

javascriptjqueryhtmlcss

JavaScript expression not being processed

What could be the reason behind not receiving the value for dish.price, dish,description, etc.? Where am I making a mistake in this code snippet? <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="utf-8"> < ...

cssangularjshtmltwitter-bootstrap

Display elements exclusively when the class XY is in an active state using JavaScript

Hello everyone, I'm new to this platform and excited to share my first post. Currently, I find myself facing a major challenge as I navigate through a bootcamp program. I have been working on a website with different sections that require specific fu ...

javascripthtmlcss

How can I change :hover to a clickable element instead?

I attempted to create a full-width accordion with the following code: .page { margin: 0; padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; } .content { -webkit- ...

javascriptjqueryhtmlcss

JavaScript/DOM - What sets apart a "CSS Selector" from an attribute?

When it comes to excluding declarative event handlers: <a href='#' onclick=<handler> ... /> Is there a significant difference between an Attribute and a CSS Selector? For example, if I define my own attribute: <a href='#&a ...

javascriptcssdom

Display the entire HTML webpage along with the embedded PDF file within an iframe

I have been tasked with embedding a relatively small PDF file within an HTML page and printing the entire page, including the PDF file inside an iframe. Below is the structure of my HTML page: https://i.stack.imgur.com/1kJZn.png Here is the code I am usin ...

javascripthtmlcsspdfiframe