How to Add a jQuery Accordion in WordPress

We provide a basic example to help you integrate Upcoming event show in your website with jQuery accordion code
Create costume event post, show only upcoming event, add meta tag


Function.php

 /********** Start Custom Termine ***********/
add_action('init','Termine');
function Termine()
{
     $labels = array(
        'name' => _x('Termine', 'post type general name'),
        'singular_name' => _x('Termine', 'post type singular name'),
        'add_new' => _x('Add New', 'Termine'),
        'add_new_item' => __('Add New Termine'),
        'edit_item' => __('Edit Termine'),
        'new_item' => __('New Termine'),
        'view_item' => __('View Termine'),
        'search_items' => __('Search Termine'),
        'not_found' =>  __('Nothing found'),
        'not_found_in_trash' => __('Nothing found in Trash'),
        'parent_item_colon' => ''
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'publicly_queryable' => true,
        'show_ui' => true,
        'query_var' => true,
        'menu_icon' => admin_url(). '/images/termine.png',
        'rewrite' => true,
        'capability_type' => 'post',
        'hierarchical' => false,
        'menu_position' => null,
        'supports' => array('title','editor','thumbnail')
       
      );
 register_post_type( 'Termine' , $args );
 }

add_action("admin_init", "admin_init");

function admin_init(){
add_meta_box("year_completed-meta", "Custom Field", "date_month", "Termine", "side", "low");
}

function date_month(){
global $post;
$custom = get_post_custom($post->ID);
$date = $custom["date"][0];
$time = $custom["time"][0];
$raum = $custom["raum"][0];

?>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
 <script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<label>Date:</label>
<input name="date" id="datepicker" value="<?php echo $date;?>" />
<label>Time:</label>
<input name="time"  value="<?php echo $time;?>" />
<label>Raum:</label>
<input name="raum"  value="<?php echo $raum;?>" />

<?php
}
add_action('save_post', 'save_details');
function save_details(){
global $post;
update_post_meta($post->ID, "date", $_POST["date"]);
update_post_meta($post->ID, "time", $_POST["time"]);
update_post_meta($post->ID, "raum", $_POST["raum"]);

}


 /********** End Custom Termine ***********/


 In Front Page

 <div class="right-content">
            <h2>Termine</h2>
            <div class="inside detail_confirmation shrink2">
                <ul>
           
   

   
                <?php
                $termine = array( 'post_type' => 'Termine',
                                'meta_key' => date,
                                'orderby' => date, 'order'=> 'ASC','posts_per_page' => '5',
                    'meta_query' => array(
                                array(
                                    'key'        => 'date',
                                    'value'        => date('m/d/Y'),
                                    'compare'        => '>=',
                                ),
                            ),);
                            $termine = new WP_Query($termine);
                           
               
                        while ( $termine->have_posts()  ) : $termine->the_post();
                ?>
      
                   <li class="page_title">
                   
                   <div class="heading">
                  
                  <?php
                 
                    $date=get_post_meta($post->ID, 'date', true);
                      $d=date('d', strtotime($date));
                    $m=date('M', strtotime($date));
                    //$current=date('m/d/Y');
                    //if($current <= $date)
                    //{
                   ?>
                   <h3><?php echo $d;?>
                   <small><?php
                        switch ($m) {
                      case "Mar":
                        echo "Mär";
                        break;
                      case "May":
                        echo "Mai";
                        break;
                      case "Oct":
                        echo "Okt";
                        break;
                     case "Dec":
                        echo "Dez";
                        break;
                      default:
                        echo $m;
                        }
                        ?></small>
                   </h3><?php the_title();?></div>
                  <section class="booking_area children" style="display: none;">
                    <div class="inner-part">
                        <p><?php  echo substr($post->post_content,0,140);?></p>
          <p><a href="<?php echo the_permalink();?>" rel="bookmark"  style=" float: right;">weiterlesen...</a>
          <small style="float:left;color:#0190EC;"><?php echo get_post_meta($post->ID, 'time', true);?></small>
          </p>
       
                    </div>
                    </section>
                  </li>
                <?php // } ?>
                  <?php endwhile;  ?>
    <?php wp_reset_query(); ?>
                  
             </ul>
          </div>
           
           
          
               
                <div class="clients">
                   
                        <ul>
                    <?php  $partner = array( 'post_type' => 'Partner', 'order' => 'DESC' ,'posts_per_page' => 20);
                            $partner = new WP_Query($partner);
                        while ( $partner->have_posts() ) : $partner->the_post();
                        ?>
                        <?php $partner_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
                        <li><a href="<?php echo $post->post_content;?>" target="_blank"><img src="<?php echo $partner_image;?>" alt="<?php echo $partner_image;?>"/></a></li>
                       <?php endwhile;  ?>
                   <?php wp_reset_query(); ?>
                    </ul>
                  
                </div>
               
                   
        </div>
       

/*** Accordion.css ****/

.inside{float: left;margin-bottom: 20px;padding: 0 2% 0;width: 96%;}
.right-content h4 {margin-bottom: 18px;padding: 0 0 8px;color: #292929;font-family: open sans;font-size: 19px;font-weight: 600;background: url("../images/border.png") no-repeat scroll left bottom;}
li.page_title {
    background: url("../images/next1.png") no-repeat scroll 96% 18px #e7e7e7;
    border-top: 1px solid #f0f0f0;
    color: #000;
    cursor: pointer;
    float: left;
    font-size: 0.8em;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
}
.active.page_title .heading {background:#fff; border:1px solid #e3e3e3; border-radius:4px;color: #191919;font-family: 'Open Sans', sans-serif; font-size:14px;}
.page_title .heading {
    float: left;
    width: 100%;
}
.heading h3 {
    background: none repeat scroll 0 0 #b8b8b8;
    display: inline-block;
    font-size: 16px;
    line-height: 16px;
    margin: 0 2% 0 0;
    min-width: 45px;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}
.heading h3 > small {
    display: block;
}
.page_title .booking_area {
    background: none repeat scroll 0 0 #f0f0f0;
    display: none;
    float: left;
    padding: 10px 3%;
    width: 94%;
}
.inner-part > p {
    font-family: "Lato";
    font-size: 14px;
    font-weight: 400;
    line-height: 23px;
    text-transform: none;
}
.detail_confirmation ul li.page_title .booking_area {display: none;}
.inner-part {float: left;padding: 20px 0;position: relative;width: 100%; background:#fff;}
.inner-part p{font-family: 'verdanaregular';font-size:12px; color:#191919;line-height: 18px;}
.inner-part .top_head {color: #676767;float: left;font-size: 16px;margin-bottom: 20px;width: 100%;}
.right-content .appointment .inner {padding: 0 3%;width: 94%;}
.right-content .appointment{float:left; width:100%;}
.right-content .appointment h4{color:#292929; font-size:20px;font-family: 'verdanaregular';}
.right-content .appointment p{color:#3c3a3a; font-size:12px;font-family: 'verdanaregular'; line-height:20px;}
.right-content .appointment li{border-bottom: 1px dotted #d2d2d2;display: block;padding: 11px 0;}
.right-content .appointment li img{ display: inline-block;vertical-align: middle;margin: 0 22px 0 0;}
.right-content .appointment li p{color:#010101; font-size:16px;font-family: 'verdanaregular';}
.right-content .appointment li p small{color:#3c3a3a; font-size:12px;}
.right-content .appointment li p a{color:#1f3159; font-size:16px; text-decoration:underline;}
.right-content .appointment li p a:hover{text-decoration:none;}
.row1 figure h2{
color: #797979;

/**** Accordion.js ****/
$(window).load(function(e) {
    $('.detail_confirmation ul li.page_title').children('.booking_area').hide();
    //$('.detail_confirmation ul li.page_title').eq(0).children('.booking_area').show();
});
$(document).ready(function(e) {   
    $('.detail_confirmation ul li.page_title .heading').click(function(e){
            $('.detail_confirmation ul li.page_title').removeClass('active');
            $(this).parent().addClass('active');
            $('.detail_confirmation ul li.page_title').children('.children').slideUp();
            $(this).siblings('.children').slideDown();
    });
});   


Also include following file from google
html5.js
jquery.js
reset.css