Link to home
Start Free TrialLog in
Avatar of Andrew Spackman
Andrew SpackmanFlag for United Kingdom of Great Britain and Northern Ireland

asked on

jQuery slideToggle one div at a time instead of all independently

Hi,

I have created a custom post type category for some services. I am trying to get the content to slide down when the icon is clicked/toggled. It seems to work but when you click on another icon, they both stay open which I dont want as I want the content full width, Just a little stuck with the JQuery and CSS for this. Would really appreciate some help.

Here is a link to the page im working on http://www.mabwealthmanagement.co.uk/service-category/services/

Many Thanks,
Andrew
Avatar of Steve Bink
Steve Bink
Flag of United States of America image

Right now, you have this code embedded into your page's head element:
$(function(){
var $allItems =  $(".team-row > div");
$( ".bio-button a, .bio_close" ).click(function() {
    var id = this.id, itemId = ".bio.post-" + id;
    $allItems.not($(itemId).slideToggle('slow')).hide();	
});
});

Open in new window


You are telling jQuery to look for everything in the domain ".team-row > div", which also does not match ".bio.post-xxx", where "xxx" is the id of the clicked item.  The children under your .team-row div are not div elements - they are article elements.  Additionally, it looks like you actually want to target the section elements holding the actual text, as the itemid references.  Change the var assignment:
var $allItems = $(".team-row section.bio");

Open in new window

Avatar of Andrew Spackman

ASKER

That's great thank you, also thank you for explaining how it works. If you look at the link now, you will notice what I've done. Would be great if you could just quickly see why the row of <articles> or icons break up when toggled. I have moved the section out of the <article> tag do that its full width but this seems to behave funny when you click through each one, although the fourth one in the row displays fine.

Many Thanks,

Andrew
It is because you have moved the sections outside of the article elements.  When they are displayed, they are set to width:100%, which means they take up the entire width of the parent container (div.team-row).  The rest of the child elements get pushed down as a result.

You can either put the section elements back as children of the article, or adjust your style rules to account for the new positioning.
Does it mean I need to position the container after the following code before the row div ends?

<?php $count++; ?>
<?php if ($count==4 ||$wp_query->found_posts==0) : ?>
<?php $count=0; ?>
I'd need more context to explain further.
Ok, so what im trying to achieve is rows of 4 services, when an item is toggled, lets say the second item, then all 4 items are still in the row and the content for the selected item is displayed underneath full width at 100% pushing the other rows down.
Your previous structure - with the sections inside the articles - should accomplish that.
In my previous structure width a width of 100% would only be at the same width as the column
Thats why I took it out of the container
So you want the text to be full-width, but not to break up the row of icons?  You need a structure like jQuery tabs.
Yes that's correct. Is this a straight forward process?
Pretty much.  jQuery tabs is simple to implement, and has a decent degree of customization.  I'm pretty sure it will fit your needs.
So am I to just change the <article> container .tg-one-fourth-staff to a tab?
Since you want to keep them in rows, I recommend making each row a tab control.  So your ".team-row" container will be the control, with each ".tg-one-fourth-staff" turning into a tab.  The text container is obviously the tab content.
So my <section class="bio post-291">......</section> for example will be the text container underneath each .tg-one-fourth-staff div? all wrapped in .team-row which will be my control container?
This is what I've used as a base....

$(document).ready(function(){
      
      $('ul.tabs li').click(function(){
            var tab_id = $(this).attr('data-tab');

            $('ul.tabs li').removeClass('current');
            $('.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#"+tab_id).addClass('current');
      })

})

.container{
                  width: 800px;
                  margin: 0 auto;
            }



            ul.tabs{
                  margin: 0px;
                  padding: 0px;
                  list-style: none;
            }
            ul.tabs li{
                  background: none;
                  color: #222;
                  display: inline-block;
                  padding: 10px 15px;
                  cursor: pointer;
            }

            ul.tabs li.current{
                  background: #ededed;
                  color: #222;
            }

            .tab-content{
                  display: none;
                  background: #ededed;
                  padding: 15px;
            }

            .tab-content.current{
                  display: inherit;
            }

<div class="container">

      <ul class="tabs">
            <li class="tab-link current" data-tab="tab-1">Tab One</li>
            <li class="tab-link" data-tab="tab-2">Tab Two</li>
            <li class="tab-link" data-tab="tab-3">Tab Three</li>
            <li class="tab-link" data-tab="tab-4">Tab Four</li>
      </ul>

      <div id="tab-1" class="tab-content current">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div id="tab-2" class="tab-content">
             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div id="tab-3" class="tab-content">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
      <div id="tab-4" class="tab-content">
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>

</div><!-- container -->
Ok so Ive got this working but it there any way to add in the post ID to each tab and relevant content as the second row is controlling the top row?

http://www.mabwealthmanagement.co.uk/service-category/services/
It's all in how you structure your output.  Take a look at this:User generated imageThe red boxes are your current tabs, and the magenta box is your tab content.  Your goal is to make the green boxes your tabs, and the blue box your tab content.
Yes I understand that, but dont I need to add the post ID as a class to the tabs and the jQuery so that it know which to toggle, or am I going in the wrong direction? All these services are effectively posts with the content being called in <?php the_content(); ?>
You do it exactly like you implemented the test tabs you have there now.  The tab control (the ul element) uses the data-tab attribute on each of its li elements to track that element's content box.  Everything else translates directly one-to-one: team-row is your container, the articles are the li elements, and the sections are the content divs.  You'll need to adjust your structure slightly, but this is pretty straight-forward.
Hi Steve,
Thanks for that, you make it sound quite simple but I'm just having trouble getting my head around it. I have however tried changing the structure but the content doesn't show.

http://www.mabwealthmanagement.co.uk/service-category/services/
They seem to toggle now but no content :/
I think Im making a bit of a mess with this, could you please help?
Ok so I put it back to how I started to try again. I've drawn up the structure and surely I only need to move the section outside of the team-row container? but im not sure where I need to put the following post count for the loop

<?php $count++; ?>
<?php if ($count==4 ||$wp_query->found_posts==0) : ?>
<?php $count=0; ?>
Can you post the code you are using to generate this structure?
<?php wp_reset_query(); ?>
<?php $count=0; ?>
<!-- Start WordPress Loop -->
      <?php  $i = 0; echo '<div class="post-row first-post">';while ( have_posts() ) : the_post(); ?>
                   
    <?php if ($count==0) : ?>
      
      <?php do_action( 'accelerate_before_post_content' ); ?>
   

   
 <div class="team-row clearfix">
           
                        <?php endif; ?>

                              <?php      $format = accelerate_archive_display_type_select(); ?>
                                    
               
                        <article class="tg-services-col" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                    
   
   
                              <div class="team-image">
                            <div class="bio-toggle bio-button post-<?php the_ID(); ?>">
                                              
                                <a style="color:#FFFFFF;" href="javascript:void(0)" class="bio-toggle services bio_inner post-<?php the_ID(); ?>" id="<?php the_ID(); ?>">
                                      Read more...
                                </a>
   
                            </div><!--bio button-->
                           
                            <?php echo get_the_post_thumbnail( $post_id, 'thumbnail', array( 'class' => 'services-thumb' ) );?>
                           
                                          
                       
                                    </div><!--team-image-->

<div class="bio-header">

      <h1 class="service-title">
                  <?php the_title(); ?>
            </h1>
       
       
       
       
       
        <div class="bio-header-right">
       
        <?php if( get_field('linked_in_url') ): ?>
       
        <a href="<?php the_field('linked_in_url'); ?>" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
      
<?php endif; ?>

<?php if( get_field('email_address') ): ?>
       
        <a href="mailto:<?php the_field('email_address'); ?>"><i class="fa fa-envelope" aria-hidden="true"></i></a>
      
<?php endif; ?>
       
       
       
       
        </div><!--bio-header-right--><div class="clearfix"></div>
         <h2 class="bio-job-title"><?php global $wp_query; $postid = $wp_query->post->ID; echo get_post_meta($postid, 'job_title', true); wp_reset_query();?></h2>

      </div><!--bio-header-->
   
   
   
   

      
</article>

 
                <section class="bio post-<?php the_ID(); ?>">
        <h1 class="entry-title">
              <?php the_title(); ?>
        </h1>
        <div class="entry-content clearfix">
       
        <?php the_content();?>
   
            <?php
                  the_content();

                  wp_link_pages( array(
                        'before'            => '<div style="clear: both;"></div><div class="pagination clearfix">'.__( 'Pages:', 'accelerate' ),
                        'after'             => '</div>',
                        'link_before'       => '<span>',
                        'link_after'        => '</span>'
            ) );
            ?>
      </div>
              

          <a href="javascript:void(0)" class="bio-toggle bio_close post-<?php the_ID(); ?>"><i class="fa fa-times-circle" aria-hidden="true"></i>
</a>
    </section><!--section bio-->  
   
                        <?php $count++; ?>
                       
                       
                    <?php if ($count==4 ||$wp_query->found_posts==0) : ?>
                <?php $count=0; ?>
               
            <div class="clearfix"></div>
           
         
   
        </div><!-- team row-->
       
       
        </div>
Please use a code block to post your code, or just attach the file itself.
Ok, thank you, I didn't know how you did that but found out - thanks
<?php wp_reset_query(); ?>
<?php $count=0; ?>
<!-- Start WordPress Loop -->
      <?php  $i = 0; echo '<div class="post-row first-post">';while ( have_posts() ) : the_post(); ?>
                    
    <?php if ($count==0) : ?>
      
      <?php do_action( 'accelerate_before_post_content' ); ?>
    
 <div class="team-row clearfix">
           
                        <?php endif; ?>

                              <?php      $format = accelerate_archive_display_type_select(); ?>
                                    
                        <article class="tg-services-col" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                    
                              <div class="team-image">
                            <div class="bio-toggle bio-button post-<?php the_ID(); ?>">
                                              
                                <a style="color:#FFFFFF;" href="javascript:void(0)" class="bio-toggle services bio_inner post-<?php the_ID(); ?>" id="<?php the_ID(); ?>">
                                      Read more...
                                </a>
    
                            </div><!--bio button-->
                            
                            <?php echo get_the_post_thumbnail( $post_id, 'thumbnail', array( 'class' => 'services-thumb' ) );?>
                            
                                    </div><!--team-image-->

<div class="bio-header">

      <h1 class="service-title">
                  <?php the_title(); ?>
            </h1>
        
        <div class="bio-header-right">
        
        <?php if( get_field('linked_in_url') ): ?>
        
        <a href="<?php the_field('linked_in_url'); ?>" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
      
<?php endif; ?>

<?php if( get_field('email_address') ): ?>
        
        <a href="mailto:<?php the_field('email_address'); ?>"><i class="fa fa-envelope" aria-hidden="true"></i></a>
      
<?php endif; ?>
        
        </div><!--bio-header-right--><div class="clearfix"></div>
         <h2 class="bio-job-title"><?php global $wp_query; $postid = $wp_query->post->ID; echo get_post_meta($postid, 'job_title', true); wp_reset_query();?></h2>

      </div><!--bio-header-->
    
</article>

                <section class="bio post-<?php the_ID(); ?>">
        <h1 class="entry-title">
              <?php the_title(); ?>
        </h1>
        <div class="entry-content clearfix">
        
        <?php the_content();?>
    
            <?php 
                  the_content();

                  wp_link_pages( array( 
                        'before'            => '<div style="clear: both;"></div><div class="pagination clearfix">'.__( 'Pages:', 'accelerate' ),
                        'after'             => '</div>',
                        'link_before'       => '<span>',
                        'link_after'        => '</span>'
            ) );
            ?>
      </div>
              

          <a href="javascript:void(0)" class="bio-toggle bio_close post-<?php the_ID(); ?>"><i class="fa fa-times-circle" aria-hidden="true"></i>
</a>
    </section><!--section bio-->  
    
                        <?php $count++; ?>
                        
                    <?php if ($count==4 ||$wp_query->found_posts==0) : ?>
                <?php $count=0; ?>
            <div class="clearfix"></div>
        </div><!-- team row-->
        </div>

Open in new window

Was that ok?
Yup, that was what I needed.  I need a little time to analyze and get back to you.  I'll try to have something for you this evening..
That will be brilliant if you can :) thank you
ASKER CERTIFIED SOLUTION
Avatar of Steve Bink
Steve Bink
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial