jQuery simplification

user_19401678 0
Viewed 27

I pieced together this code for an accordion but I know it can be simplified and/or written better. Anybody? I would have used a css only approach but most of the html is coming in dynamically from a WP widget so I can't use input>checkbox. It is much appreciated.

jQuery:

    var expand1 = function( event ) {
    if($(".menu-support-faq-container").css('display') == 'none') {
        $(".sl1 .widget_nav_menu h3").html("HIDE ALL TOPICS");
        $(".menu-support-faq-container").show("slow");
    } else {
        $(".sl1 .widget_nav_menu h3").html("VIEW ALL TOPICS");
        $(".menu-support-faq-container").hide("slow");
    }
}
  $( ".sl1 .widget_nav_menu h3" ).on( "click", expand1 );
        
    var expand2 = function( event ) {
    if($(".menu-support-security-container").css('display') == 'none') {
        $(".sl2 .widget_nav_menu h3").html("HIDE ALL TOPICS");
        $(".menu-support-security-container").show("slow");
    } else {
        $(".sl2 .widget_nav_menu h3").html("VIEW ALL TOPICS");
        $(".menu-support-security-container").hide("slow");
    }
}
  $( ".sl2 .widget_nav_menu h3" ).on( "click", expand2 );
        
        var expand3 = function( event ) {
    if($(".menu-support-advanced-container").css('display') == 'none') {
        $(".sl3 .widget_nav_menu h3").html("HIDE ALL TOPICS");
        $(".menu-support-advanced-container").show("slow");
    } else {
        $(".sl3 .widget_nav_menu h3").html("VIEW ALL TOPICS");
        $(".menu-support-advanced-container").hide("slow");
    }
}
  $( ".sl3 .widget_nav_menu h3" ).on( "click", expand3 );

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <article class="sl1">
        <div class="widget_media_image"><img alt="" class="image wp-image-2397 attachment-full size-full" height="100" src="/assets/faq-icon.png"></div>
        <div class="widget_text">
            <h3>FAQ and Getting Started</h3>
            <div class="textwidget">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div class="widget_nav_menu">
            <h3>HIDE ALL TOPICS</h3>
            <div class="menu-support-faq-container" style="display: block;">
                <ul class="menu" id="menu-support-faq">
                </ul>
            </div>
        </div>
    </article>
    <article class="sl2">

ETC...
        
</body>
</html>
simplify jquery
1 Answers

YOu could try this: https://jsfiddle.net/dry6nz27/1/

$("div[class*='widget_nav_menu']").on("click", function(event) {
    if ($(this).find("div[class*='menu-support-']").css('display') == 'none') {
      $(this).find("h3").html("HIDE ALL TOPICS");
      $(this).find("div[class*='menu-support-']").show("slow");
    } else {
      $(this).find("h3").html("VIEW ALL TOPICS");
      $(this).find("div[class*='menu-support-']").hide("slow");
    }
});

you could even cut it down to 2 lines

$("div[class*='widget_nav_menu']").on("click", function(event) {
  $(this).find("h3").html(($(this).find("div[class*='menu-support-']").css('display') == 'none') ? "HIDE ALL TOPICS" : "VIEW ALL TOPICS");
  x = ($(this).find("div[class*='menu-support-']").css('display') == 'none') ? $(this).find("div[class*='menu-support-']").show("slow") : $(this).find("div[class*='menu-support-']").hide("slow");
});

Should stop you from having to repeat the same JS code over and over again

user_193472060
Related