JQuery image accordion active css

user_11770718 0
Viewed 233

I haven't seen many accordions linked to an image next to it opposed to an image in the body so decided to play around with it a bit. I can't seem to get the css to be applied to the active class though even though the class itself changes. Does the h3 need to be a button for that to work? I just want the active class to have a - instead of a + and to have a darker colour applied. Any tips would be appreciated. I think the JQuery is right, it might just be my css or something. Here is the code so far -

  // Hide all panels
  let panels = $("#services__accordion > .accordion > .accordion__body").hide()

  // Hide all accordion images
      images = $("#accordion__img > img").hide();

  // Show first panel at start
  panels.first().show();

  // Show first accordion image at start
  images.first().show();

  // On click of a panel title

  $("#services__accordion .accordion  h3").click(function() {
    // The panel is not the H3, but its parent.
    let panel = $(this).parent(),
      tabName = panel.attr("tab-name"),
      image = $("#" + tabName + "-img");
    //Slide Up all other panels
    panels.slideUp();
    images.slideUp();

    // Slide Down target panel, and target image.
    panel.find(".accordion__body").slideDown();
    image.slideDown();    

    return false;
  });
});
    
//Add active class
    $(".accordion  h3").on('click', function(){
        $(".accordion  h3").removeClass('active');
        $(this).addClass('active');
    });

and the jsfiddle here - https://jsfiddle.net/MarioL/32nv0szw/ Thanks!

accordion css jquery
1 Answers

.... I can't seem to get the css to be applied to the active class

This happens because your this css part is generic:

.active:after {
    content: "\2212";
 }

Change it to a specific one:

#services__accordion h3.active:after {
    content: "\2212";
}

Moreover, you can merge the click event and use it to show at startup the panel of interest.

The code is:

let panels = $("#services__accordion > .accordion > .accordion__body").hide()

// Hide all accordion images
images = $("#accordion__img > img").hide();



// On click of a panel title

$("#services__accordion .accordion  h3").click(function () {
    // The panel is not the H3, but its parent.
    let panel = $(this).parent(),
            tabName = panel.attr("tab-name"),
            image = $("#" + tabName + "-img");

    // Slide Up all other panels
    panels.slideUp();
    images.slideUp();

    // Slide Down target panel, and target image.
    panel.find(".accordion__body").slideDown();
    image.slideDown();

    $(".accordion  h3.active").removeClass('active');
    $(this).addClass('active');

    return false;
}).eq(0).trigger('click');
*{
    font-family:arial;
}

#services__accordion h3 {
    background-color: #F4F4F7;
    color: #033;
    padding: 10px;
}

#services__accordion h3:after {
    content: '\002B';
    color: #ccc9d4;
    font-weight: bold;
    float: right;
    margin-right: 10px;
}
#services__accordion{
    margin:auto;
    width:80%;
}
#accordion-container {
    display: grid;
    grid-template-columns: 40% auto;
}
#accordion__img img {
    display: block;
    width:95%;
    margin:auto;
}
#services__accordion h3:hover {
    background-color: #2aa0c8;
    color: #F4F4F7;
}

.active {
    background-color: #2aa0c8;
    color: #F4F4F7;
}

#services__accordion h3.active:after {
    content: "\2212";
}
.accordion__body{
    padding:0px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div id="accordion-container">
    <div id="accordion__img">
        <img id="photography-img" src="https://www.w3schools.com/w3css/img_lights.jpg" alt="Photography">
        <img id="creativity-img" src="https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png"
             alt="Creativity">
        <img id="web-design-img" src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Web Design">
    </div>

    <div id="services__accordion">
        <div class="accordion" tab-name="photography">
            <h3>ABC</h3>

            <div class="accordion__body">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <!-- /.accordion__body -->
        </div>
        <div class="accordion" tab-name="creativity">
            <h3>DEF</h3>

            <div class="accordion__body">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <!-- /.accordion__body -->
        </div>
        <div class="accordion" tab-name="web-design">
            <h3>GHI</h3>

            <div class="accordion__body">
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            <!-- /.accordion__body -->
        </div>
    </div>
    <!-- /#services__acordion -->
</div>

user_38805850
Related