jQuery Accordion using categories and child cat titles

  • Resolved lberelson

    (@lberelson)


    11 years, 2 months ago

    Have read extensively how to use a jQuery accordion in a custom theme I’m attempting. The accordion I’m trying to make would be all categories (and child cats) of id ‘4’ or name ‘programs’ Here’s what I have so far but not working. Function doesn’t seem to be used and is not nesting the cats either; even in the hardcoded attempt (see template below). Thx for any help you can offer.
    ref: https://howlingwolfmedia.com/site3/class-categories/

    functions file:
    https://pastebin.com/naZTzHDt

    if(!is_admin()){
        wp_deregister_script('jquery');
        wp_register_script('jquery', ('https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'), false, '1.6.4');
        wp_enqueue_script('jquery');
        wp_deregister_script('jquery-ui');
        wp_register_script('jquery-ui', ('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'), false, '1.8.16');
        wp_enqueue_script('jquery-ui');
    }

    document read file:
    https://pastebin.com/gPRNtbLg

    jQuery(document).ready(function($){
            $('#accordion').accordion();
    });

    header calls to jQuery
    https://pastebin.com/b9W9ak32

    <!-- Add the link to the jQuery UI stylesheet 'before' the site CSS file so you can override properties as needed -->
    <link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_stylesheet_directory_uri(); ?>/css/ui.theme.css/" />

    <!-- add js file that invokes the jQuery UI accordion file here
    source: https://www.ethangardner.com/articles/add-a-jquery-ui-accordion-widget-area-to-a-wordpress-theme/  -->
    <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/ux.js"></script>

    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

    template using accordion function
    https://pastebin.com/i7kawD4j

    <div class="accordion"><!-- attempt hard code first -->
    <h3><a href="#">First header</a></h3>
            <div>Content 1 default as collapsed</div>
    <h3><a href="#">Second header</a></h3>
            <div>Content 2 default as collapsed</div>
    </div>

    <!-- accordion dynamic -->
    <div class="accordion">
    <?php
    $args=array(
      'orderby' => 'name',
      'order' => 'ASC',
      'hide_empty' => FALSE, //important or will not display at all since some cats may have no posts
      'child_of' => 4,
      'display' => 'linear'
      );
    $categories=get_categories($args);
      foreach($categories as $category) {
        echo ' <a href="#">' . $category->name.'</a>';
      }
    ?>
    </div>

Viewing 5 replies - 1 through 5 (of 5 total)
  • Lisa

    (@berelsonhotmailcom)

    p.s. tried changing <div class=”accordion”> to id on the template page. still no go.

    Lisa

    (@berelsonhotmailcom)

    OK trying this syntax on the template instead: must work on the li part which needs to change to post entries..

    <?php $categories = get_categories('hide_empty=0&orderby=name&title_li=&child_of=4'); foreach ($categories as $cat) { ?>
			<dt><a href="#"<?php if ($cat->slug == 'photos') {?> class="customer-acquisitiontop" <?php } else {?>class="customer-acquisitiontop" <?php }?>id="<?php echo $cat->slug; ?>" data-filter=".<?php echo $cat->slug; ?>"><h2><?= $cat->cat_name; ?></h2></a></dt>
<dd class=" ">
  <ul class="row">
     <li class="<?php echo $cat->slug; ?>">
     </li>
  </ul>
</dd>
<?php
}
?>

    thanks to this post https://www.ads-software.com/support/topic/get-category-children?

    Thread Starter lberelson

    (@lberelson)

    template using accordion

    <?php
    $args=array(
      'child_of' => 4,
      'orderby' => 'name',
      'order' => 'ASC',
      'hide_empty' => '0'
      );
    $categories=get_categories($args);
      foreach($categories as $category) {
        echo '
       <div class="' . $category->slug . '">
                    <h3>' . $category->name . '</h3>

                    <ul>';

                    global $post;
                    $args = array( 'posts_per_page' => -1, 'category' => $category->term_id, 'orderby' => 'name', 'order' => 'ASC' );
                    //alternatively this also works:  'nopaging' => true
    $myposts = get_posts( $args );
    foreach( $myposts as $post ) :  setup_postdata($post);
            echo  '<li><a href="' . get_permalink($post->ID) . '  style="color:#000" ">' . get_the_title($post->ID) . '</a></li>';
    endforeach;
            echo  '
                  <!--  <li><a href="' . get_category_link( $category->term_id ) . '">More...</a></li> -->
                    </ul>
                    <br />
                    </div>
       ';
    }
?>

    thx to alchymyth for getting at least the tags to work… now onto applying the jquery styling
    source: https://www.ads-software.com/support/topic/display-list-of-post-titles-within-get_categories

    Thread Starter lberelson

    (@lberelson)

    Got most of the WP dynamic code to pull correct data from the get cats tag so i’m closing out this post and starting a new one to link the template to the jQuery accordion (some of the code above still relevant).

    Thread Starter lberelson

    (@lberelson)

    Used codex version for registering Ended up using hard coded scripts downloaded to theme. Still working on replacing with wp_enqueue_scripts.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘jQuery Accordion using categories and child cat titles’ is closed to new replies.