Plugin 2108

Accordion Snipet

Add this to the functions file to get a nice Accordion function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//////////////////////////////////////////////////////////////////
// Accordian
//////////////////////////////////////////////////////////////////
add_shortcode('accordion', 'shortcode_accordion');
    function shortcode_accordion( $atts, $content = null ) {
    $out = '';
    $out .= '<div class="accordion">';
    $out .= do_shortcode($content);
    $out .= '</div>';
     
   return $out;
}  
 
//////////////////////////////////////////////////////////////////
// Toggle shortcode
//////////////////////////////////////////////////////////////////
add_shortcode('toggle', 'shortcode_toggle');
    function shortcode_toggle( $atts, $content = null ) {
    extract(shortcode_atts(array(
        'title'      => '',
        'open' => 'no'
    ), $atts));
 
    $toggleclass = '';
    $toggleclass2 = '';
    $togglestyle = '';
 
    if($open == 'yes'){
        $toggleclass = "active";
        $toggleclass2 = "default-open";
        $togglestyle = "display: block;";
    }
 
    $out = '';
    $out .= '<h5 class="toggle '.$toggleclass.'"><span class="arrow">+</span>' .$title. '</h5>';
    $out .= '<div class="toggle-content '.$toggleclass2.'" style="'.$togglestyle.'">';
    $out .= do_shortcode($content);
    $out .= '</div>';
     
   return $out;
}

Then add to js

1
2
3
4
5
6
7
8
9
10
11
12
$( ".toggle" ).click(function(event) {
 
  $(this).parent().children('.toggle-content').toggleClass('on');
  var arrow_text = $(this).children( ".arrow" ).html();
   
  if (arrow_text == "-") {
  $(this).children( ".arrow" ).html( '+' ); }else{ $(this).children( ".arrow" ).html( '-' ); }
   
  $(this).parent().children('.toggle-content').slideToggle( "fast", function() { });
 
 
});

Then add to css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.toggle  { cursor: pointer; }
 
 
.toggle-content {
    display: none;
}
 
.arrow {
    background-color: #000000;
    color: #ffffff;
    display: inline-block;
    margin-right: 10px;
    padding: 2px 5px;
    text-align: center;
    vertical-align: top;
    width: 20px;
}
Comments








© Plugin 2108 2025
Partners