Change content in div with AJAX (SEO friendly) using ACF WordPress
- SOLVED
I've got a page that I'm pulling some Advanced Custom Fields data into. I want to be able to have a navigation that switches out the content of a DIV area base on the link that is clicked. I'd like this to load nicely with AJAX, but also be handled in an SEO friendly way.
Have been searching like crazy online on the best way to do this, and just getting nowhere.
Example page code:
<div class="cog-navigation">
<div class="cog-nav-link"><a class="info" href="#">Home</a></div>
<div class="cog-nav-link"><a class="gallery" href="#">Oil Tips</a></div>
<div class="cog-nav-link"><a class="projects" href="#">Projects</a></div>
</div>
<div class="content" id="info"><?php the_field('info_field'); ?></div>
<div class="content" id="gallery"><?php the_field('gallery_field'); ?></div>
<!-- it's the same for the other links -->
So basically, in the example above I'd want the "gallery" div to show if the gallery link was clicked, and the "info" div to vanish. I'd like this to be AJAX just because I don't want the page "jumping" back up when someone clicks. I'd like the loading to be smooth. If that can be accomplished without AJAX that's fine. Need it to be SEO friendly. If this costs more than ten bucks, somebody tell me.
Answers (2)
Romel Apuya answers:
you can use jquery
add this in your functions.php
<?php
add_action('wp_head','content_switcher');
function content_switcher(){ ?>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
$('.content:not(:first)').hide();
$( ".cog-navigation .cog-nav-link a" ).on('click', function(event){
event.preventDefault();
var index= $(this).parent().index();
$('.content').hide();
$('.content').eq(index).show();
});
});
/* ]]> */
</script>
<?php
}
?>
Romel Apuya comments:
you can also try this..
class specific
<?php
add_action('wp_head','content_switcher');
function content_switcher(){ ?>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
$('.content:not(:first)').hide();
$( ".cog-navigation .cog-nav-link a" ).on('click', function(event){
event.preventDefault();
var index= $(this).attr('class');
$('.content').hide();
$('#'+index+'.content').show();
});
});
/* ]]> */
</script>
<?php
}
?>
Romel Apuya comments:
[[LINK href="http://jsfiddle.net/z52G2/"]]http://jsfiddle.net/z52G2/[[/LINK]]
Romel Apuya comments:
[[LINK href="http://jsfiddle.net/z52G2/1/"]]http://jsfiddle.net/z52G2/1/[[/LINK]]
Kyler Boudreau comments:
Romel - this worked beautifully! My vote is on your answers. Thank you!!!!
timDesain Nanang answers:
if you want the content show smoothly,
//change:
$('.content').eq(index).show();
//to
$('#'+index+'.content').fadeIn();
//change:
$('#'+index+'.content').show();
//to
$('#'+index+'.content').fadeIn();