Andrew Spackman
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
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
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
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.
You can either put the section elements back as children of the article, or adjust your style rules to account for the new positioning.
ASKER
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; ?>
<?php $count++; ?>
<?php if ($count==4 ||$wp_query->found_posts==
<?php $count=0; ?>
I'd need more context to explain further.
ASKER
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.
ASKER
In my previous structure width a width of 100% would only be at the same width as the column
ASKER
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.
ASKER
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.
ASKER
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.
ASKER
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?
ASKER
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').removeCl ass('curre nt');
$(this).addClass('current' );
$("#"+tab_id).addClass('cu rrent');
})
})
.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 -->
$(document).ready(function
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current'
$('.tab-content').removeCl
$(this).addClass('current'
$("#"+tab_id).addClass('cu
})
})
.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 -->
ASKER
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/
http://www.mabwealthmanagement.co.uk/service-category/services/
ASKER
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.
ASKER
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/
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/
ASKER
They seem to toggle now but no content :/
ASKER
I think Im making a bit of a mess with this, could you please help?
ASKER
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; ?>
<?php $count++; ?>
<?php if ($count==4 ||$wp_query->found_posts==
<?php $count=0; ?>
Can you post the code you are using to generate this structure?
ASKER
<?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_co ntent' ); ?>
<div class="team-row clearfix">
<?php endif; ?>
<?php $format = accelerate_archive_display _type_sele ct(); ?>
<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"><?ph p 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>
<?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_co
<div class="team-row clearfix">
<?php endif; ?>
<?php $format = accelerate_archive_display
<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')
<?php endif; ?>
<?php if( get_field('email_address')
<a href="mailto:<?php the_field('email_address')
<?php endif; ?>
</div><!--bio-header-right
<h2 class="bio-job-title"><?ph
</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==
<?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.
ASKER
Ok, thank you, I didn't know how you did that but found out - thanks
ASKER
<?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>
ASKER
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..
ASKER
That will be brilliant if you can :) thank you
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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:
Open in new window