Title: jquery toggle
Last modified: August 21, 2016

---

# jquery toggle

 *  Resolved [odp123](https://wordpress.org/support/users/odp123/)
 * (@odp123)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/)
 * Hi,
 * I am trying to create a collapsable overview of authors.
    This is my jQuery:
 *     ```
       <script type="text/javascript">
       jQuery(document).ready(function(){
   
           //hide all
          jQuery('.slidingDiv',this).hide();
   
       	jQuery(".show_hide").click(function(){
   
       		jQuery(".slidingDiv").slideToggle("slow");
       		jQuery(this).toggleClass("active"); return false;
   
       	});
   
       });
   
       </script>
       ```
   
 * Here is my template markup. What happens is that all the authors toggles at the
   same time, instead of individually. Therefor I am let to believe that it is in
   fact the markup of the template and not the jQuery that is the problem. I just
   can’t find the error. So a pair of fresh eyes would be nice 🙂
 *     ```
       <?php
       /*
       Template Name: Medlemmer
       */
       ?>
   
       <?php get_header(); ?>
   
       			<div id="content">
   
       				<div id="inner-content" class="wrap clearfix">
   
       						<div id="main" class="eightcol first clearfix" role="main">
   
       <?php
           $blogusers = get_users('blog_id=1&orderby=nicename&role=subscriber');
           foreach ($blogusers as $curauth) { ?>
                               <div class="userProfile">
                                   <header class="profile">
                                       <div class="info">
                                           <h1 class="title"><?php echo $curauth->lydsystem; ?></h1>
                                           <a href="<?php echo $curauth->facebook; ?>"><?php echo $curauth->facebook; ?></a>
                                       </div>
                                       <div class="avatar"><?php echo get_wp_user_avatar($curauth->ID, 100); ?></div>
       <div class="show_hide">Vis Profil</div>
                                   </header>
   
                                   <div class="slidingDiv">
       	                            <p>
       	                                <b>Beskrivelse: </b><?php echo $curauth->description; ?>
       	                            </p>
       	                            <p>
       	                                <b>Specs: </b><?php echo $curauth->specs; ?>
       	                            </p>
       	                            <?php $upload_dir = wp_upload_dir();?>
       	                            <p>
       	                                <b><a href="<?php echo $curauth->pdf; ?>">Download PDF</a></b>
       	                            </p>
       	                            <p>
       	                                <b>Galleri: </b>
       	                            </p>
   
                                       <?php
                                           echo do_shortcode('[wppa type="album" album="#owner,'.$curauth->user_login.'"][/wppa]');
                                       ?>
                                       </br>
                                   </div>
                                   <hr/>
                                   </br>
                                   </div>
                                   <?php } ?>
   
       						</div>
   
       						<?php get_sidebar(); ?>
   
       				</div>
   
       			</div>
   
       <?php get_footer(); ?>
       ```
   

Viewing 15 replies - 1 through 15 (of 15 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4873759)
 * Have you reviewed [wp_enqueue_script()](http://codex.wordpress.org/Function_Reference/wp_enqueue_script)?
 *  Thread Starter [odp123](https://wordpress.org/support/users/odp123/)
 * (@odp123)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874043)
 * Sorry for the late reply!
 * In what way do you mean review wp_enqueue_script()?
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874044)
 * Try reading the page at the link I posted above.
 *  Thread Starter [odp123](https://wordpress.org/support/users/odp123/)
 * (@odp123)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874045)
 * yes?
 * My scripts are enqueued properly and in the right order
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874046)
 * Can you link the page with the issue?
 *  Thread Starter [odp123](https://wordpress.org/support/users/odp123/)
 * (@odp123)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874047)
 * I’ll post the link but its for a private dev server so please confirm that you
   have it, and ill remove it again.
 * thanks!
    [link removed]
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874048)
 * Looking at your source code I can’t find this:
 *     ```
       <script type="text/javascript">
       jQuery(document).ready(function(){
   
           //hide all
          jQuery('.slidingDiv',this).hide();
   
       	jQuery(".show_hide").click(function(){
   
       		jQuery(".slidingDiv").slideToggle("slow");
       		jQuery(this).toggleClass("active"); return false;
   
       	});
   
       });
   
       </script>
       ```
   
 *  Thread Starter [odp123](https://wordpress.org/support/users/odp123/)
 * (@odp123)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874049)
 * that is because it is being enqueued in the script called collapse.js
 *  Thread Starter [odp123](https://wordpress.org/support/users/odp123/)
 * (@odp123)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874050)
 * btw. Vis Profil == Show Profile 🙂
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874051)
 * Well looking at your jQuery aren’t you actually telling it to toggle all elements
   that match the “slidingDiv” class?
 *     ```
       jQuery(".slidingDiv").slideToggle("slow");
       ```
   
 *  Thread Starter [odp123](https://wordpress.org/support/users/odp123/)
 * (@odp123)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874052)
 * it seems to work standalone
 * [http://jsfiddle.net/fswR5/](http://jsfiddle.net/fswR5/)
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874053)
 * You’re using different jQuery there:
 *     ```
       $('.show_hide').click(function(){
               $(this).next('.slidingDiv').slideToggle();
                return false;
           });
       ```
   
 *  Thread Starter [odp123](https://wordpress.org/support/users/odp123/)
 * (@odp123)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874055)
 * this line is ignored
    jQuery(this).toggleClass(“active”); return false;
 * second i changed $ to jQuery other than that it is the same, no?
 *     ```
       $(document).ready(function(){
          $('.slidingDiv',this).hide();
          $('.show_hide').click(function(){
          $(this).next('.slidingDiv').slideToggle();
          return false;
           });
       });
       ```
   
 * //
 *     ```
       jQuery(document).ready(function(){
   
           //hide all
          jQuery('.slidingDiv',this).hide();
       	jQuery(".show_hide").click(function(){
       		jQuery(".slidingDiv").slideToggle("slow");
       		return false;
   
       	});
   
       });
       ```
   
 * .next is of cause not there but that ‘could’ be besides the point.
 * If we take the jsfiddle as the working result. implemented directly in wordpress.
   it goes like this:
 *     ```
       //on dom ready we load the function and include $ in the parameter
       jQuery(document).ready(function($){
   
       //We then hide the divs we want to collapse
       $('.slidingDiv',this).hide();
   
       //then we make the function that activates when clicking .show_hide classes
       $('.show_hide').click(function(){
       //now we toggle the hidden classes
       $(this).next('.slidingDiv').slideToggle();
       //stop propagation
       return false;
       }); //close
       }); //close
       ```
   
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874056)
 *     ```
       jQuery(document).ready(function($) {
   
           $('.show_hide').click(function(){
               $(this).parent().next('.slidingDiv').slideToggle();
                return false;
           });
   
       });
       ```
   
 *  Thread Starter [odp123](https://wordpress.org/support/users/odp123/)
 * (@odp123)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874057)
 * ahh yes of cause, thanks Andrew

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘jquery toggle’ is closed to new replies.

## Tags

 * [collapse](https://wordpress.org/support/topic-tag/collapse/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [markup](https://wordpress.org/support/topic-tag/markup/)
 * [toggle](https://wordpress.org/support/topic-tag/toggle/)

 * 15 replies
 * 3 participants
 * Last reply from: [odp123](https://wordpress.org/support/users/odp123/)
 * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/jquery-toggle/#post-4874057)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics