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

What are the steps to ensure that this iframe adjusts perfectly to the page in terms of both vertical and horizontal dimensions

I have a sandbox from Material UI that you can view at this link: https://codesandbox.io/s/material-demo-forked-c8e39?file=/demo.js Upon loading the page, an iframe displays some HTML content. Although the width fits perfectly, there are two vertical scro ...

javascriptcssreactjsiframematerial-ui

What is the best way to choose all cells that begin, include, or finish with a specific term using JQuery/CSS?

I have a table with some cells and I am looking to utilize JQuery to select specific cells. For example: <td>John Doe</td> <td>John Doe1</td> <td>1John Doe</td> I want to select cells that start with 1, include Doe, a ...

javascriptjqueryhtmlcss

What is the best way to show toast notifications for various selections in a dropdown menu?

I have a dropdown menu labeled "FavoriteFoods" that includes options such as "Pizza," "Sushi," "Burgers," and "Biryani." When one of these food choices is selected from the dropdown, I would like a toast pop-up to appear with the message "Great choice!" ...

javascriptjqueryhtmltoast

techniques for accessing HTML source code through an AJAX call

I am trying to retrieve the HTML source of a specific URL using an AJAX call, Here is what I have so far: url: "http://google.com", type: "GET", dataType: "jsonp", context: document.doctype }).done(function ...

javascriptjqueryhtmlajax

Jquery selector is failing to function within Bootstrap modal when loading form with CodeIgniter

I'm having trouble implementing a filtered user list using jQuery. For some reason, my input value isn't being selected correctly. Can you assist me in identifying the issue? Thank you! ...

jquerycodeigniterjquery-selectorsbootstrap-modal

What is the best way to apply the :nth-child() selector to target every second <div> element within ALL child elements?

I'm currently developing a commenting feature, and I am in need of CSS to select every alternate child <div> (even children nested within the first set of children). Consider this example HTML structure: <body> <div class="comment"&g ...

htmlcsscommentscss-selectors

Maximizing efficiency with JavaScript object reduction

let students = [ { name: "john", marks: 50, }, { name: "mary", marks: 55, }, { name: "peter", marks: 75, }, ]; I need to find the total sum of marks using the reduce method. Here is my att ...

javascriptjqueryreactjs

Are there ways to incorporate extra icons into NavMenu in Blazor 8?

I am exploring ways to incorporate extra icons into the NavMenu.razor component of my Blazor version 8 application. In the earlier version, Blazor 7, there was an iconset setup located in wwwroot/css/, which allowed me to include additional icons simply by ...

cssblazoricons

fixed divs that remain in place while scrolling

In the past, I have implemented a method similar to this: However, I am not a fan of the "flicker" effect that occurs when the page is scrolled and the div needs to move along with it. Recently, I have come across websites where certain elements (such as ...

cssscrollcss-position

Expanding the width of horizontal checkboxes to 100% using jQuery Mobile

I'm attempting to expand three horizontal checkboxes across the entire width of the page. <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-s ...

jqueryhtmlcssjquery-mobilecheckbox

How can the value attribute be obtained from the click class?

$(document).on('click','.edit', function(){ var appid = $(this).getAttribute('value'); I am trying to figure out how to save the value of the "value" attribute for an image with the edit class. Can anyone help me with thi ...

javascriptjquery

What is an easy method for including a broader div within a Y-scrolling container containing multiple divs?

Here is a scenario for consideration: http://codepen.io/anon/pen/NPGKPq Is there a CSS approach, without incorporating Javascript, to display the full width of the blue div? Essentially, rather than having a horizontal scrollbar, only show a vertical scr ...

css

Tips for combining dvloading and required functionalities on the submit button

My form has 2 fields that must be filled out, and I used the required attribute to enforce this rule. Enter A:<input type="text" name="a" required><br> Enter B:<input type="text" name="b" required><br> <button type="submit" cl ...

javascriptjqueryhtmlforms

Experience interactive video playback by seamlessly transitioning a webpage video into a pop-up when clicking on an

I want to have a video play as a pop-up when the user clicks a play button, while also fading out the background of the page. It should be similar to the way it works on this website when you click to watch a video. How can I achieve this? <div class=" ...

javascripthtmlcss

serialize form data using jQuery ajax by referencing the form's name

I have encountered a situation where I need to include the same form twice on a page, with identical names and fields. This is a specific requirement that I must adhere to. The second form will be displayed within a jQuery modal dialog. When the save butt ...

jqueryajaxformsserializationstruts2

Tips for dragging and dropping a file attachment directly into your web browser

Google has recently introduced this feature to Gmail, and it doesn't need you to download any additional plugins. This feature is compatible with both Firefox and Chrome browsers, but unfortunately not with Internet Explorer. ...

javascriptjquerydrag-and-drophtmlgmail

Utilizing ReactJS to make an Ajax request

I am trying to transfer data to individuals and then display it using the array map function. export default class App extends Component { constructor(props) { super(props); this.state = { persons: [], }; } componentDidMount() { $ ...

javascriptjqueryajaxreactjs

Obtaining the XML element containing a designated attribute name

Greetings and thank you in advance, I have a question regarding the AJAX return and parsing of XML information. While I am successfully returning a request, I am fetching all the XML nodes with the tag ngPropertyName. However, I wish to retrieve only the ...

jqueryajaxxmlmobile

Replace the content within the iFrame completely

Is it possible to have a textarea where I can input HTML code and see a live preview of the webpage in an iframe as I type? For example, here is the code I'd like to write in the textarea: <!DOCTYPE html> <html> <head> ...

javascriptjqueryhtmliframe

Problem with selecting dynamic content inoperable

$(document).on('keydown', '.lst', function (e) { var code = (e.keyCode ? e.keyCode : e.which); if (code == 13) { html = '<tr>'; html += '<td>' + i + '</td>'; ...

phpjqueryajax