Home/ Questions/Q 3609960
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T21:41:35+00:00

I am making an accordion using CSS, the below is my use of CSS

  • 0

I am making an accordion using CSS, the below is my use of CSS class without space. I use this to eliminate the animation of padding during slideDown and slideUp effect

.acc_container.block{
    padding: 20px; 
}

since it stated out that padding is 20 pixels but when i check it seems like no padding at all!!

instead, i need to add this in order to let my padding works

.acc_container. block{
    padding: 20px; 
}

(with space)

So what’s the difference between the class in CSS with and without a space?

This is all my HTML, jQuery with CSS code:

<html>
<head>
<style type="text/css">
body {
    font: 15px normal Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.7em;
}
.container {
    width: 500px;
    margin: 0 auto;
}
h2.acc_trigger {
    padding: 0;
    margin: 0 0 5px 0;
    background: url(h2_trigger_a.gif) no-repeat;
    height: 46px;
    line-height: 46px;
    width: 500px;
    font-size: 2em;
    font-weight: normal;
    float: left;
    display: block;
    padding: 0 0 0 50px;
    color: #fff;
    cursor: pointer;
}
h2.active {
    background-position: left bottom;
}
.acc_container {
    margin: 0 0 5px;
    padding: 0;
    overflow: hidden;
    font-size: 1.2em;
    width: 500px;
    clear: both;
    background: #f0f0f0;
    border: 1px solid #d6d6d6;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.acc_container.block {
    padding: 20px;
}
.block {
    padding: 20px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script> type="text/javascript">

$(document).ready(function(){
       $('.acc_container').hide();    $('.acc_trigger:first').addClass('active').next().show();
       $('.acc_trigger').click(function(){
        if($(this).next().is(':hidden')) 
        {
           $('.acc_trigger').removeClass('active').next().slideUp();
     $(this).toggleClass('active').next().slideDown();
        }  

       return false;    });

});

</script>
</head>
<body>
<div class="container">
    <h2 class="acc_trigger">Web Design and Development</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>Need A website?</h3>
            <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut 
            venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum 
            transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi 
            suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, 
            autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. 
            Delenit patria nunc os pneum acsi nulla magna singularis proprius autem 
            exerci accumsan.</p>
        </div>
    </div>
    <h2 class="acc_trigger">Logo/ Corporate Identity</h2>
    <div>
        class=&quot;acc_container&quot;&gt;
        <div class="block">
            <h3>Need a Logo?</h3>
            <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut 
            venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum 
            transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi 
            suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, 
            autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. 
            Delenit patria nunc os pneum acsi nulla magna singularis proprius autem 
            exerci accumsan. </p>
            <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut 
            venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum 
            transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi 
            suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, 
            autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. 
            Delenit patria nunc os pneum acsi nulla magna singularis proprius autem 
            exerci accumsan. </p>
        </div>
    </div>
    <h2 class="acc_trigger">Search Engine Optimization</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>Need to be heard</h3>
            <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut 
            venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum 
            transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi 
            suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, 
            autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. 
            Delenit patria nunc os pneum acsi nulla magna singularis proprius autem 
            exerci accumsan.</p>
        </div>
    </div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    .className. anotherClassName is invalid selector, so it will be ignored by browsers. Space itself () is a descendant selector.

    So you probably ask what’s the difference between .classA .classB and .classA.classB selectors.

    First selector will match any element with class classB that’s placed within element with class classA, eg.:

    <div class="classA">
  <p>
    Hello World!
    <span class="classB">this text will be matched by first selector</span>
    Lorem ipsum!
  </p>
</div>

    Second selector will match any elements with both, classA and classB classes, eg.:

    <p class="classA">This won't be matched</p>
<p class="classA classB classC classD">But this will be</p>
    • 0