• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Trouble with expandable accordion list - extra space

bmurphy65

New Coder
Hello! I'm trying to perfect an expandable accordion list that I put together, but I cant seem to fix the fact that there is extra white space after the text on every single block (See example here).

Heres what I have:




JavaScript:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>



<script>

$(function() {

   $( ".accordion" ).accordion();

   $(".accordion").accordion({ header: "h3", collapsible: true , active: false , heightStyle: "content" });

});

</script>




I've tried changing heightStyle: "content" to heightStyle: "fill" but it hasn't been working. Any input on this is much appreciated!

Thanks!
 

bmurphy65

New Coder
Hello bmurphy65!

What is the CSS of the block?
Hey! Thanks so much for your response. I'm actually doing this within squarespace, so the only css that I've typed out for other features on the website are the following:
CSS:
#collection-5f9b5ff35ade2b74d8069e86 {
.help-tip{
    position: absolute;
    top: 18px;
    right: 18px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{   
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.help-tip p:before{ 
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}


@-webkit-keyframes fadeIn {
    0% {
        opacity:0;
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}
}
table {
  width: 100%;
  border-collapse: collapse;
}
tr:nth-of-type(odd) {
  background: #eee;
}
th {
  background: #eee;
  color: white;
  font-weight: bold;
}
td, th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}

Not sure if that helps!
 

LTomy

Active Coder
Staff Team
Guardian
What does the HTML of the list looks like? What is the parent of the <p> that appears when a 'section' is open? Is the website up? That could help if you could link the page.
 

bmurphy65

New Coder
What does the HTML of the list looks like? What is the parent of the <p> that appears when a 'section' is open? Is the website up? That could help if you could link the page.
Unfortunately the website is not up, so I'm unable to provide a link. However, the html is the following (its quite long in its full form, so here is just the beginning portion. The same section structure just repeats afterwards):
HTML:
<div class="accordion">
<h3>Is the application offered in other languages? </h3>
   <div>
     <p>Although the online application form itself is in English, we have put together PDF versions in Spanish and Chinese to guide participants through the process. These documents can be found here [link] or on our website [link]</p>
   </div>
<h3>second question</h3>
   <div>
     <p>details</p>
   </div>
 

LTomy

Active Coder
Staff Team
Guardian
What is the result if you apply the following style?:
CSS:
accordion div p{
    background-color: red;
}
Is most of the block red?
And what is the result if you apply the following style?:
CSS:
accordion div p{
    display: inline;
}

** Edit: There was a mistake in the first style. I meant 'background-color' and not 'color'.
 

bmurphy65

New Coder
What is the result if you apply the following style?:
CSS:
accordion div p{
    background-color: red;
}
Is most of the block red?
And what is the result if you apply the following style?:
CSS:
accordion div p{
    display: inline;
}

** Edit: There was a mistake in the first style. I meant 'background-color' and not 'color'.
When I apply the first style, the background turns red, but the drop down is still white when I click on it. When I apply the second style, the red background disappears and nothing else changes.Screen Shot 2021-01-11 at 7.06.03 PM.png
 
Top