I have a custom post type for testimonials and it has few posts. I'm trying to create an accordion which shows posts by year. So when you click on the year it displays all the posts for that year (see screenshot below).
I have got it somewhat working, problem is when I click on the year, it only shows one post for that year. Here's the code -> https://pastebin.com/3F98dcEU
<?php get_header();?>
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-bottom:20px;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
<div class="container-fluid testimonial-header">
<div class="row">
<div class="col-lg-12 text-center">
<h1>Testimonials</h1>
</div>
</div>
</div>
<div class="container testimonial-content">
<div class="block-1">
<h2 class="heading">Delivering Exceptional Customer Service</h2>
<p class="sub-heading">Being locally owned and operated, our objective is to provide exceptional client service delivered by our professional team. We take great pride in building homes that are beyond expectation, on time and on budget.</p>
</div>
</div>
<div class="container-fluid py-5 archive-testimonial">
<div class="container">
<div class="row">
<div class="col-lg-12">
<?php
global $wpdb;
$posts = $wpdb->posts;
//Get all unique years as "years" from posts where post type is equal to testimonials
$sql = "SELECT DISTINCT(YEAR(`post_date`)) as years FROM $posts WHERE post_type = 'testimonials' ORDER BY years DESC"; //Get all post year list by DESC
//Loop through all results and use date_query param https://codex.wordpress.org/Class_Reference/WP_Query#Date_Parameters
$result = $wpdb->get_results($sql);
foreach($result as $rs) { ?>
<button class="accordion"><?php echo $rs->years ;?></button>
<?php $args = array(
'post_type' => 'testimonials',
'post_per_page'=> -1,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
'date_query' => array(array(
'year'=> $rs->years,
),),
);
$loop = new WP_Query($args);
if($loop->have_posts()) {
while($loop->have_posts()) : $loop->the_post(); ?>
<div class="panel testimonial-grid-archive testimonial-loop-ah">
<div>
<?php
if(has_post_thumbnail()) { ?>
<div style="text-center">
<div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
</div>
<?php } else { ?>
<div class="testimonial-image-aden placeholder-testimonial-image"> </div>
<?php }
?>
</div>
<div class="testimonial-content">
<p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
<p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
<div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>
<p class="person-title-archive">- <?php the_title() ;?></p>
</div>
</div>
<?php endwhile;
}
}
?>
</div>
</div>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
<?php get_footer();?>
You could try the code with built-in post type and you'd see what I'm talking about.
My approach to this might be completely wrong.
Any help is highly appreciated.
Your panel div is inside your while loop, and so it is repeated for each post. You should have it outside of your loop, so it is only generated once for every year.
Change this:
while($loop->have_posts()) : $loop->the_post(); ?>
<div class="panel testimonial-grid-archive testimonial-loop-ah">
<div>
<?php
if(has_post_thumbnail()) { ?>
<div style="text-center">
<div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
</div>
<?php } else { ?>
<div class="testimonial-image-aden placeholder-testimonial-image"> </div>
<?php }
?>
</div>
<div class="testimonial-content">
<p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
<p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
<div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>
<p class="person-title-archive">- <?php the_title() ;?></p>
</div>
</div>
<?php endwhile;
to this:
<div class="panel testimonial-grid-archive testimonial-loop-ah">
<?php while($loop->have_posts()) : $loop->the_post(); ?>
<div>
<?php
if(has_post_thumbnail()) { ?>
<div style="text-center">
<div class="testimonial-image-aden" style="background-image:url('<?php echo the_post_thumbnail_url(); ?>');"> </div>
</div>
<?php } else { ?>
<div class="testimonial-image-aden placeholder-testimonial-image"> </div>
<?php } ?>
</div>
<div class="testimonial-content">
<p class="testimonial-highlight"><?php echo the_field('testimonial_highlight') ;?></p>
<p><img class="star-ratings-ah" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/stars.png" alt=""></p>
<div class="testimonial-text-ah">" <?php the_field('testimonial_text'); ?> "</div>
<p class="person-title-archive">- <?php the_title() ;?></p>
</div>
<?php endwhile; ?>
</div>
Related
I have dynamic categroy .In click button "show more" for every category , we should display only elements for this category . in my case when I click in "show more" button for one category , data for all category with button "show more" are displayed .this is the problem .I want display only data for currrent div clicked .
<style>
.hide-block {
display: none ;
}
</style>
<div class="container">
<?php
$custom_terms = get_terms('genre');
foreach ($custom_terms as $custom_term) {
wp_reset_query();
$postsPerPage = -1;
$args = [
'post_type' => 'film',
'posts_per_page' => $postsPerPage,
'orderby' => 'id',
'order' => 'ASC',
'tax_query' => [
[
'taxonomy' => 'genre',
'field' => 'slug',
'terms' => $custom_term->slug,
],
],
];
$loop = new WP_Query($args);
$parent_included = false;
if ($loop->have_posts()) {
echo '<h2>' . $custom_term->name . '</h2>';
$counter = 0;
$count_posts = count($loop->have_posts());
$i = 0;
while ($loop->have_posts()) :
$loop->the_post();
$i++;
$img = get_field('image', "$post->ID");
$cat = $custom_term->term_id;
if ($custom_term->name == " Adventure") {
?>
<div class="col-lg-12 col-md-6 col-sm-12 col-xs-12">
<div class="card1 recrutements">
<div class="card-header">
<div>
<img src=<?php echo $img["url"]; ?> class='mymap-icon' alt=''>
</div>
<div>
<span class="titre-recrutement">
<div class="bnt-makers ">Communiqué de presse </div>
<div> <?php echo get_the_date(); ?></div>
<div class="bnt-maker "><?php the_field('nom', $post->ID); ?>
</div>
</div>
</div>
<div class="card-body">
<p><?php the_field('description', $post->ID); ?> </p>
<a class="dedcription-btn pop recrut" href="<?php the_permalink(); ?>" target="_blank" rel="nofollow">
<span class="name-descripeion">En savoir plus</span>
<div class="btn-icon">
<i class="fas fa-chevron-right"></i>
</div>
</a>
</div>
</div>
</div>
<?php
} else {
$counter++;
if (!$parent_included) {
echo '<div id="parentId">';
$parent_included = true;
}
?>
<div class="col-lg-16 col-md-6 col-sm-12 col-xs-12" class="content">
<?php
if ($counter <= 2) {
echo ("<div class='card recrutements' data-id='$cat'>");
} else {
echo ("<div class='card recrutements hide-block' data-id='$cat'>");
//var_dump($cat);
}
?>
<div class="card-header">
<div>
<img src=<?php echo $img["url"]; ?> class='mymap-icon' alt=''>
</div>
<div>
<span>
<div><?php echo '<p>' . $custom_term->name . '</p>'; ?>
</div>
<div> <?php echo get_the_date(); ?></div>
<div class="bnt-maker "><?php the_field('nom', $post->ID); ?>
</div>
</div>
</div>
<div class="card-body">
<p><?php the_field('description', $post->ID); ?> </p>
<a class="dedcription-btn pop recrut" href="<?php the_permalink(); ?>" target="_blank" rel="nofollow">
<span class="name-descripeion">En savoir plus</span>
<div class="btn-icon">
<i class="fas fa-chevron-right"></i>
</div>
</a>
</div>
</div>
</div>
<?php
}
endwhile;
echo('</div>');
}
if ($custom_term->count > 2) {
echo ' <div class="show-more">Show more</div> ';
}
}
?>
</div>
<script>
$(document).ready(function(){
$(".show-more").click(function(){
$("div.card").css({"display": "block"});
});
});
</script>
In this case, your onclick functions are not properly targeted. Currently, any time any Show More button is clicked, any div with the card class is displayed. You need to set an id on each card to properly specify which one you want to open, like so.
<style>
div {
display: none;
}
</style>
<script>
const hideCards = () => {
$('div.card').css({'display': 'none'});
}
const showCard1 = () => {
hideCards();
$('div#card1').css({'display': 'block'});
}
const showCard2 = () => {
hideCards();
$('div#card1').css({'display': 'block'});
}
</script>
<div>
<div class="card" id="card1">
<p>Card 1 content</p>
</div>
<div class="card" id="card2">
<p>Card 2 content</p>
</div>
<button onclick="showCard1">Show Card 1</button>
<button onclick="showCard2">Show Card 2</button>
</div>
I'm not sure that this is the best way to do it or if this even works, but this is the general gist of what you need. Note that you could do this programatically using data attribute (attr) or by indexing elements in the DOM (eq).
I'm looking for a method in native JavaScript or jQuery to display a div by clicking on the icon that corresponds to it.
The icons are in a carousel that works with Owl Carousel 2
Icons and div are created dynamically on WordPress with an ACF Repeater Fields
Icons and div each have an ID :
For icons: img_1, img_2 ...
For blocs: div_1, div_2 ...
The icons carousel loop :
<?php $GLOBALS['img'] = 0;
if (have_rows('carrousel_icons')): ?>
<div id="owl-carousel-skills" class="owl-carousel-skills owl-theme col-12 col-sm-10">
<?php while (have_rows('carrousel_icons')): the_row();
$icon = get_sub_field('icon');
$GLOBALS['img']++;
?>
<div id="img_<?= $GLOBALS['img'] ?>" class="owl-carousel-skills-menu-item">
<img src="<?= $icon['url'] ?>" alt="<?= $icon['alt'] ?>">
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
ACF Repeater Fields Blocs :
<?php
$GLOBALS['div'] = 0;
$counter = 0;
if (have_rows('carrousel_icons')): ?>
<div class="col-12 col-sm-8 bloc_carousel_icons__txt">
<?php while (have_rows('carrousel_icons')): the_row();
$title = get_sub_field('title');
$txt = get_sub_field('txt');
$GLOBALS['div']++;
if ($counter) {
?>
<div id="div_<?= $GLOBALS['div'] ?>" class="inactive" style="display: none;">
<h3><?= $title ?></h3>
<?= $txt ?>
</div>
<?php continue; } ?>
<!-- first DIV -->
<div id="div_<?= $GLOBALS['div'] ?>" class="active" style="display: block;">
<h3><?= $title ?></h3>
<?= $txt ?>
</div>
<?php $counter++;
endwhile; ?>
</div>
<?php endif; ?>
Link to see a screenshot
I tested something but it only shows / hides all the div at once by clicking on any icon :
$(function(){
var $allBlocks = $(".bloc_carousel_icones__textes > div");
var id = this.id, itemId = ".bloc_carousel_icones__textes > #div_" + id;
$(document.body).on("click", "div.owl-carousel-competences-menu-item", function (evt) {
var id = this.id, itemId = ".bloc_carousel_icones__textes > #div_" + id;
$allBlocks.not($('.hidden').fadeToggle()).hide();
});
});
I have no idea how to do this, anyone have an idea?
Thanks in advance !
You can do it like this: Add a click() event handler for all images that have an id that starts with img_, get the number of this id with substr and toggle the corresponding div.
$(document).ready(function() {
$("img[id^='img_']").on("click", function() {
let id = $(this).attr("id").substr(4);
$("#div_" + id).fadeToggle();
});
})
Update: As asked in the comment, there's a solution needed to deactivate the previously active <div> when a new <div> gets activated. This can be done as follows:
$(document).ready(function() {
$("img[id^='img_']").on("click", function() {
let id = $(this).attr("id").substr(4);
if ($("div[id^='div_']").not($("#div_" + id)).is(":visible")) {
$("div[id^='div_']").not($("#div_" + id)).fadeToggle();
}
$("#div_" + id).fadeToggle();
});
})
div[id^='div_'] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img_1" src="https://dummyimage.com/50x50/000000/ffffff&text=1" />
<img id="img_2" src="https://dummyimage.com/50x50/cecece/000000&text=2" />
<div id="div_1">
div 1
</div>
<div id="div_2">
div 2
</div>
I know there is a lot of answers about this but i cant seem to implement it with my code. What i want to do is when the user open the homepage a recommendation pop up will only show once a day or hours. Any help and suggestion is greatly appreciated.
This is the code in launching the pop up modal on page load.
<?php
if(mysqli_num_rows($check_ip) > 0 )
{
?>
<script type="text/javascript">
$(document).ready(function()
{
$("#myModal").modal('show');
});
</script>
<?php
}
?>
This is the code for pop up modal
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Welcome back! Here's our recommended speakers for you.</h4>
</div>
<div class="modal-body">
<?php
$user_ip = $_SERVER['REMOTE_ADDR'];
$check_ip = mysqli_query($conn, "SELECT ip_address FROM reservations WHERE ip_address = '$user_ip'");
$history_data = mysqli_query($conn, "SELECT * FROM reservations WHERE ip_address = '$user_ip'");
$row = mysqli_fetch_array($history_data);
$topic = $row['topic'];
$ip_address = $row['ip_address'];
$select_speakers = mysqli_query($conn, "SELECT * FROM speakers WHERE speaker_specialization1 = '$topic' OR speaker_specialization2 = '$topic' OR speaker_specialization3 = '$topic' ORDER BY speaker_reservedcount DESC LIMIT 3");
while($row = mysqli_fetch_array($select_speakers))
{
echo '
<a href="speakerProfile.php?id='.$row["id"].'">
<div class=" col-sm-4 ">
<div class="thumbnail"><img class="speakers-image" src="img/'.$row["speaker_image"].'" style="height:150px; min-width:100%;"/>
<div class="caption" style="max-height:270px; min-width:100%" >
<center>
<h3 class="speakers-name" style="font-weight:bold; margin: 2px 10px -6px 10px;">'.$row["speaker_fullname"].'</h3>
<hr>
<div class="speaker-topics" style="margin-top:-20px;">
<p style="text-transform: capitalize;">'.$row["speaker_specialization1"].'</p>
</div>
<div class="speaker-topics">
<p style="text-transform: capitalize;">'.$row["speaker_specialization2"].'</p>
</div>
<div class="speaker-topics">
<p style="text-transform: capitalize;">'.$row["speaker_specialization3"].'</p>
</div>
<hr>
<p class="speakers-name" style="margin:-10px 0px 5 px 0px;">Reserved Count: '.$row["speaker_reservedcount"].'</p>
</center>
</div>
</div>
</div>
</a>
';
}
?>
</div>
</div>
</div>
</div>
i know this is not much but it might help somebody who has a problem like this. This how i do it
<?php
if(mysqli_num_rows($check_ip) > 0 && isset($_SESSION["popUp"]) == false)
{
$_SESSION["popUp"] = "true";
?>
<script type="text/javascript">
$(document).ready(function()
{
$("#myModal").modal('show');
});
</script>
<?php
}
?>
The result I want is the product details uploading from the database once the data is fetched. It shows the error of duplicate entries.
angular.min.js:107 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.8/ngRepeat/dupes?p0=products%20in%20data&p1=string%3An&p2=n
at Error (native)
I have two enteries in the database but I can't find the problem.
HTML
<html ng-app="fetch">
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="listproduct.css">
<!-- jQuery library -->
<script src="jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="bootstrap.min.js"></script>
<script src="angular.min.js"></script>
<script src="angularscript.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Ladies Boutique</a>
</div>
</div>
</nav>
<div class="container">
<div class="row " ng-controller="dbCtrl">
<div class="item col-xs-4 col-lg-4 " ng-repeat="products in data" >
<div class="thumbnail" >
<img class="group image" src=""{{products.PRODUCT_IMAGE_LINK}}"" alt="" />
<div class="caption">
<h4 class="group inner item-heading">{{products.PRODUCT_NAME}}</h4>
<p class="group inner item-text">{{products.PRODUCT_DESCRIPTION}}</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
₹ {{products.PRODUCT_PRICE}}</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="#">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
listproduct.php
<?php
// Including database connections
$database='angulardatabase';
$connection= mysqli_connect('localhost', 'root', '');
if(!$connection){
die("Database Connection Failed".mysqli_errno($connection));
}
else
{
echo'Connection Successfull';
}
$select_db= mysqli_select_db($connection, $database);
if(!$select_db)
{
die("Database Selection Failed".mysqli_errno($connection));
}
// mysqli query to fetch all data from database
$query = "SELECT * from angulartable";
$result = mysqli_query($connection, $query);
$data = array();
if(mysqli_num_rows($result) != 0) {
while($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
}
// Return json array containing data from the databasecon
echo $json_info = json_encode($data);
?>
angularscript.js
var fetch = angular.module('fetch',[]);
fetch.controller('dbCtrl',['$scope','$http',function($scope,$http){
$http.get("exactphp.php")
.success(function(data){
$scope.data=data;
alert(data);
})
.error(function(){
$scope.data="error in fetching data";
alert("Error in fetching data");
});
}]);
listproducts.css
.glyphicon { margin-right:5px; }
.thumbnail
{
margin-bottom: 20px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.item.list-group-item
{
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
{
background: #428bca;
}
.item.list-group-item .list-group-image
{
margin-right: 10px;
}
.item.list-group-item .thumbnail
{
margin-bottom: 0px;
}
.item.list-group-item .caption
{
padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd)
{
background: #eeeeee;
}
.item.list-group-item:before, .item.list-group-item:after
{
display: table;
content: " ";
}
.item.list-group-item img
{
float: left;
}
.item.list-group-item:after
{
clear: both;
}
.list-group-item-text
{
margin: 0 0 11px;
}
body
{
background-color: white;
padding-top:80px;
}
Use track by index
ng-repeat="products in data track by $index"
It track by $index keeps track of each object in the data array separately based on index of each item in the array. So, even if there are duplicates in the data ng-repeat can keep track of them separately.
Occurs if there are duplicate keys in an ngRepeat expression. Duplicate keys are banned because AngularJS uses keys to associate DOM nodes with items.
The message tells you exactly what to do:
Use 'track by' expression to specify unique keys
If you have identifier such as unique ID (for example products.id use track by products.id). If you don't, use $index due the $index is always unique.
You are getting this error because your data have some duplicates keys. So to remove this just use track by $index.
Hence you modified code:
<div class="item col-xs-4 col-lg-4 " ng-repeat="products in data track by $index" >
<div class="thumbnail" >
<img class="group image" src=""{{products.PRODUCT_IMAGE_LINK}}"" alt="" />
<div class="caption">
<h4 class="group inner item-heading">{{products.PRODUCT_NAME}}</h4>
<p class="group inner item-text">{{products.PRODUCT_DESCRIPTION}}</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
₹ {{products.PRODUCT_PRICE}}</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="#">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
Its Done and it was mistake from my side in the listproduct.php file .
<?php
// Including database connections
$database='angularwaladatabase';
$connection= mysqli_connect('localhost', 'root', '');
if(!$connection){
die("Database Connection Failed".mysqli_errno($connection));
}
else
{
echo'Connection Successfull';
}
$select_db= mysqli_select_db($connection, $database);
if(!$select_db)
{
die("Database Selection Failed".mysqli_errno($connection));
}
// mysqli query to fetch all data from database
$query = "SELECT * from angularwalatable";
$result = mysqli_query($connection, $query);
$data = array();
if(mysqli_num_rows($result) != 0) {
while($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
}
// Return json array containing data from the databasecon
echo $json_info = json_encode($data);
?>
The mistake is that json data was taking that "connection successfull" of the if else statement in the JSON and angular was getting confusing of that.
<?php
// Including database connections
$database='angularwaladatabase';
$connection= mysqli_connect('localhost', 'root', '');
$select_db= mysqli_select_db($connection, $database);
if(!$select_db)
{
die("Database Selection Failed".mysqli_errno($connection));
}
// mysqli query to fetch all data from database
$query = "SELECT * from angularwalatable";
$result = mysqli_query($connection, $query);
$data = array();
if(mysqli_num_rows($result) != 0) {
while($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
}
// Return json array containing data from the databasecon
echo $json_info = json_encode($data);
?>
Thanks You All . Thanks for making me correct and you were right and correct . Thanks a Lot !!
PHP
<div id="lightbox" class="row filteredVideoContent">
<?php
foreach ( $aVideo as $oVideo ){?>
<div class="col-sm-6 col-md-3 col-lg-3 photography app" id="load_data">
<div class="portfolio-item">
<!-- <div class="hover-bg"> -->
<div class="">
<a href="#video_container" data-backdrop="static" class="video_thumb" data-toggle="modal" data-videopath="<?php echo $oVideo['videoPath']; ?>" data-videosubject="<?php echo $oVideo['videoSubject']; ?>">
<div class="hover-text" data-toggle="tooltip" data-placement="right" title="<?php echo $oVideo[ 'videoSubject' ];?>">
<h4> <?php echo substr($oVideo[ 'videoSubject' ],0,20); ?> </h4>
</div>
<?php
if( ! empty( $oVideo[ 'videoThumb' ] ) )
{
$thumbName = $oVideo[ 'videoThumb' ];
}
else
{
$thumbName = "assets/video/common.jpg";
}
?>
<img style="height:188px;width : 263px"
src="<?php echo base_url () . $thumbName ?>" class="videoThumb img-responsive"
alt="<?php echo $oVideo[ 'videoSubject' ];?>">
</a>
</div>
<div>Uploaded By : <span data-toggle="tooltip" data-placement="right" title="<?php echo $oVideo[ 'userName' ];?>"> <?php echo substr($oVideo[ 'userName' ],0,20);?> </span></div>
<div>HQ : <span data-toggle="tooltip" data-placement="right" title="<?php echo #$oVideo[ 'hq' ];?>"> <?php echo substr(#$oVideo[ 'hq' ],0,20);?> </span></div>
<div>Subject : <span data-toggle="tooltip" data-placement="right" title="<?php echo $oVideo[ 'videoSubject' ];?>"> <?php echo substr($oVideo[ 'videoSubject' ],0,20);?> </span></div>
</div>
</div>
<?php
}
?>
</div>
<?php if(count($aVideo) > 8){ ?>
<p class="dash">―――――――――――――――――――――――――――――――
<button id="showAll" class="btn tf-btn btn-default" style="float:none;">Load More</button>
―――――――――――――――――――――――――――――――</p>
<?php } ?>
</div>
jQuery
$('#showAll').on('click', function(e){
e.preventDefault();
$('.filteredVideoContent .app').filter(':hidden').show();
$('#showAll').hide();
$('.dash').hide();
});
$('#videoSearchInput').on('keyup',function(e){
e.preventDefault();
$('#showAll').show();
$('.dash').show();
});
});
CSS
.filteredVideoContent .app{
display: none;
}
.filteredVideoContent .app:nth-child(1),
.filteredVideoContent .app:nth-child(2),
.filteredVideoContent .app:nth-child(3),
.filteredVideoContent .app:nth-child(4),
.filteredVideoContent .app:nth-child(5),
.filteredVideoContent .app:nth-child(6),
.filteredVideoContent .app:nth-child(7),
.filteredVideoContent .app:nth-child(8) {
display: block;
}
p { letter-spacing: 1px;}
p button { letter-spacing: 1px; margin: 0 5px; }
Now When I click On Load more button Hidden data are shown. But when I click On that button I want scroll direct to new data which is hidden or above shown data automatically scroll down to new data which is appear on button click.
Try this. You just need the get the first of the divs which you are going to show and scroll the document to position of that element.
$('#showAll').on('click', function(e){
e.preventDefault();
$scrollToElement = $('.filteredVideoContent .app:hidden').first();
$('.filteredVideoContent .app').filter(':hidden').show();
$('#showAll').hide();
$('.dash').hide();
$('html, body').animate({
'scrollTop' : $scrollToElement.position().top
});
});
On click of "Load More", you can use this to scroll the content to top
var body = $("html, body");
body.stop().animate({scrollTop:Math.round(jQuery("#hiddenContainer").offset().top-65)}, '500', 'swing', function() {
console.log("Finished animating");
});
Where jQuery("#hiddenContainer") is the hidden container ID