2-panel accordion interface

Hello there, I've encountered a problem that seems to be related to CSS. Here is the project I'm currently working on:

My main focus is on the News accordion menu. The goal is to display a small image (50x50 with padding) next to a large headline. When the user clicks on the headline, it should expand to show the full article. If they want to read or make comments, they can then click on "View Comments" to see more information.

The issue I am facing is regarding the spacing between the image and the text. Simply increasing the height of ui.accordion-acc or -left won't solve the problem. When you click on the first expansion of "Headline 1," you will see that "View Comments" wraps underneath the image, which is not what I intended. I have tried separating these elements into different divs and using floating, but so far, nothing has worked. Ideally, I would like to have blank space below the image to accommodate the length of the article and comments without any wrapping occurring.

jquerycsshtmlaccordion

Answer №1

Here is some CSS you can try out:

ul#acc1 .acc1 { padding-left: 50px; } /* adjust headline */
ul#acc1 > li > div { padding-left: 55px; } /* tweak text block under headline */
ul#acc1 ul li { padding-left: 0; width: 487px; } /* View Comments size*/
ul#acc1 ul li div { padding-left: 20px; } /* indent comment a little more */

A slight adjustment was needed to the view comments block size, as it was extending rightward. Customize the values of 50px, 55px, 487px (set to 542px minus 55px), and 20px (additional indentation for comment) based on the thumbnail dimensions.

The issue arises from having an accordion within another accordion, causing unintended styles to be applied across multiple levels. This explains why the comments shifted down by 62px.

You can utilize more targeted CSS classes like 

ul.ui-accordion-container li a.acc1
instead of generic ones to avoid affecting both levels. Consider applying heights to the <h1> elements to match the thumbnail height. Try this approach:

h1 {
 float: left;
 margin: 0px;
 padding: 1px;
 font-size: 30px;
 color: #9667cc;
 height: 65px;
}
ul.ui-accordion-container li a.acc1 { 
 display: block; 
 padding-left: 5px; 
 margin-right: 3px; 
 height: 62px;
 color: #000; 
 text-decoration: none; 
 line-height: 28px; 
}
ul.ui-accordion-container li a.acc2 { 
 line-height: 28px; 
}

Answer №2

Why didn't the floating work as expected? I had the impression that this code should do the trick:

.img {float: left; width: 50px; padding: 5px;}
.title {float: left; width: 300px; padding: 5px;}
.clear {clear: both; height: 1px;}

<div class="img"><img src="img/news_ffxiv_a.jpg"></div>
<div class="title">TITLE</div>
<div class="clear"><!-- --></div>

According to my understanding, this setup would create ample space below the image since the other div is floated left alongside it. The key lies in floating both elements, not just one.

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 adjust flex division to occupy the entire height of its container

https://i.sstatic.net/4YInI.png https://i.sstatic.net/hu8mG.png https://i.sstatic.net/Q51ha.png I am looking to activate an onClick event on the body where discussions and icons are located. While triggering onClick on the body itself poses no issue, I a ...

htmlcssbootstrap-4onclickbootstrap-5

Video HTML autoplay feature malfunctioning

I have been attempting to use the <embed> tag in order to showcase a video on my webpage. However, I have encountered an issue where the video begins playing automatically when the page loads. In an effort to remedy this situation, I included autost ...

htmltagsembed

Issue with IE7 when using JQuery to repopulate a <ul> unordered list: new elements showing up under previously hidden elements

Within this javascript snippet, I am utilizing the code below to clear out a list of countries within a <ul> element and then repopulate it (with a slight animation using jQuery's hide() function). The functionality works smoothly in Chrome and ...

javascriptjqueryinternet-explorer-7

Tips for maintaining consistent content length of nested divs as one div's content grows

I am looking for a solution to ensure that when the map is running on my MUI card, some cards with more text content will increase in length while maintaining equal text alignment. I have attached a screenshot of my actual app and a CodeSandbox example for ...

htmlcssmaterial-ui

Guide on how to trigger an alert and confirmation pop-up upon detecting a click on the browser's back

I'm currently developing an exam application using php and jquery. The application includes several pages for creating exams: Create.php (for entering exam details) QandA.php (to add questions and answers) Marks.php (for setting up marks) Penalty.ph ...

phpjqueryajaxbrowser

"Implementing a function to automatically input a selected value from a dropdown menu into a text field

I'm facing an issue and need some help. I have a form with one select field and one text field. What I want is for the text field to display a value corresponding to the option selected in the select field. For example, if I choose "B" from the select ...

phphtmlcss

Choose a variety of table rows based on the values of the data attributes that are

Is there a more efficient way to select all rows with data attributes id 1,2.. without specifying each row individually? I need some guidance on the best approach for this. Can anyone help me out? <table id="eTable"> <tr data-empid="A123" data- ...

javascriptjquery

What could be causing the issue with HTML not being printed upon button click in ReactJS?

My goal is to display the word "Hello" on the screen when the add button is clicked. However, I am encountering an issue where it is not showing up. Any insights or solutions would be greatly appreciated! import React, { Component } from 'react'; ...

javascripthtmlreactjs

Creating a display of divs that flow from left to right in each row, and then stacking the rows from bottom to top using CSS and jQuery

My current dilemma involves a collection of divs that must be displayed in a specific order, but with a rather intricate layout. Essentially, this is the structure of my HTML: <div> <div class="box">1 (first in list)</div> <di ...

javascriptjqueryhtmlcss

Is there a way for me to make my navigation fill the entire height of the header?

I am trying to create a navigation menu within a header div where the list items are displayed horizontally inside a ul element. I want these list items to be 100% the height of the header. Despite trying to set the height to 100% on various elements such ...

htmlcss

Raise the image above the wrapping div, positioning it at the very bottom

I'm struggling to position an image within a div in a way where: it protrudes above the div it begins at the very bottom of the div (with a small gap that I can't eliminate) Below is the relevant HTML code snippet: <div class="teaser-imag ...

cssimage

I encountered an issue while attempting to fetch table data, receiving the following error message: "Uncaught TypeError: result.rows.product is not a function at products.html:134."

https://i.sstatic.net/WZ5CC.pngHere is the HTML I have written <form> <br/> <label for="products1">Product Name:</label> <input type="text" name="pdt" id="pr ...

javascripthtmljquerysqliteweb-sql

import jQuery into a JavaScript file

I'm currently working on a Chrome extension that relies on background.js to perform basic tasks. I need to include jquery.js in my background.js file so that I can utilize its ajax function, but I'm unsure of how to achieve this. Is it even possi ...

javascriptjqueryajaxgoogle-chromeinclude

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

javascripthtmlreactjsreduxmaterial-ui

Utilize Bootstrap multiselect for extracting values from optgroups and options

Having a select element with optgroups and bonded values, the structure is as follows: <select id="example-dataprovider-optgroups" multiple="multiple"> <optgroup label="Lime No. 2" value="b3a2eff6-5351-4b0f-986 ...

javascriptjquerybootstrap-4bootstrap-multiselect

Utilizing Font Awesome for social icons in a Vue component display

Currently, I'm in the process of building my own website and making the switch from traditional HTML, CSS, and JS to using VueJs. I've hit a roadblock when trying to transfer some code from my original HTML file to a Vue JS component, specificall ...

javascripthtmlvue.jswebfont-awesome

Creating a div that is subtly askew

When it comes to positioning a div 15 pixels off-center horizontally from the page, traditional methods like setting margins to auto or using position:absolute may not work in this situation. The challenge lies in ensuring that the div scales correctly a ...

csshtml

How can I display a PHP variable in JavaScript?

I am having trouble displaying a PHP variable in Javascript; Below is the code I am using: <script type="text/javascript> $(document).ready(function (){ var n=<?php echo json_encode($count)?>; for(var i=0;i<n;i++){ var div ...

javascriptphpjqueryhtml

AngularJS: Automatically refreshing ng-repeat based on checkbox filter updates in code

I have a container that is populated using ng-repeat="item in items | filter:isselected(item)". To filter the items, I have checkboxes with ng-model="selecteditem[$index]" and a filter function $scope.selectedItems = []; $scope.isselected = function(item ...

javascriptjqueryangularjscheckbox

Struggle with Firefox: Table-cell with Relative Positioning Not Acting as Parent

Upon investigation, I have come across a unique layout issue that seems to only affect Firefox. It appears that elements with display:table-cell; do not act as the positional parent for descendants with position:absolute;. It is surprising to discover th ...

htmlcssfirefox