Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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

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!
 
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!
 
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.
 
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>
 
It still does not seem to be working. Do you think it could have something to do with jquery?
JavaScript:
http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css
I think so.
Weird that it does not work.
What is the size of the <div> if you temporarely take off the <p> inside it?
 
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'.
 
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
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom