I have created a accordion and its in a loop but i want only one accordion open at a time not multiple one. I have used data parent attribute of bootstrap but its not working. Any kind of help would be highly appreciated.
I want only one accordion open at one time. How to achieve it. I think i'm having this problem because of for each loop. Is there any way to solve it ?
Here is my code :
<?php if(!empty($tickets)) : ?>
<?php foreach($tickets as $ticket) : ?>
<div class="panel-group-custom" id="#panels">
<div class="panel panel-default mb-0 no-border">
<div class="panel-heading.panel-heading-custom" >
<h4 class="panel-title">
<div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title">
<div class="row">
<div class="overflow-hidden">
<div class="col-md-2">
<span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span>
</div>
<div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div>
<div class="col-md-2">
<span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span>
</div>
<div class="col-md-1">
<span class="accordion-down">
<i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
</h4>
</div>
<div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse">
<div class="panel-body">
<div class="hidden-overflow ticket">
<div class="full-width hidden-overflow ticket-chat">
<p class="color-4 ticket-content">
<?php echo $ticket['SupportTicket']['description'] ?>
</p>
<?php if($ticket['SupportTicket']['status']>1) : ?>
<p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>
<?php echo $ticket['SupportTicket']['resolution_text']; ?>
<span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span></span>
</p>
<?php endif ?>
</div>
<div class="full-width hidden-overflow mt-5">
<!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>-->
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>
<?php else : ?>
No Records
<?php endif ?>
Try putting your #panels div outside the foreach loop - that way they are all in the same group.
Also, your #panels div should not have the "#" sign in its id.
<?php if(!empty($tickets)) : ?>
<div class="panel-group-custom" id="panels"><!-- Remove the '#' from here. -->
<?php foreach($tickets as $ticket) : ?>
<div class="panel panel-default mb-0 no-border">
<div class="panel-heading panel-heading-custom" ><!-- and remove the . from here. -->
<h4 class="panel-title">
<div data-toggle="collapse" data-parent="#panels" data-target="#collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="accordion-title">
<div class="row">
<div class="overflow-hidden">
<div class="col-md-2">
<span class="ticket-heading1" title="Ticket ID"><i class="fa fa-ticket" aria-hidden="true"></i> <?php echo $ticket['SupportTicket']['ticket_id']; ?> </span>
</div>
<div class="col-md-7"><span class="ticket-title"><?php echo $ticket['SupportTicket']['title'] ?></span></div>
<div class="col-md-2">
<span class="ticket-heading2" title="Ticket created on"><i class="fa fa-calendar" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span>
</div>
<div class="col-md-1">
<span class="accordion-down">
<i class="fa fa-chevron-down dropdown-toggle down-arrow2" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
</h4>
</div>
<div id="collapse<?php echo $ticket['SupportTicket']['id'] ?>" class="panel-collapse collapse">
<div class="panel-body">
<div class="hidden-overflow ticket">
<div class="full-width hidden-overflow ticket-chat">
<p class="color-4 ticket-content">
<?php echo $ticket['SupportTicket']['description'] ?>
</p>
<?php if($ticket['SupportTicket']['status']>1) : ?>
<p class="color-1 pull-right ticket-content"> <span class="resolution">Feedback</span>
<?php echo $ticket['SupportTicket']['resolution_text']; ?>
<span class="ticket-updated"><span class="bolder"><i class="fa fa-clock-o" aria-hidden="true"></i>
<?php $bdate = date_create($ticket['SupportTicket']['modified']); ?>
<?php echo date_format($bdate,"d-M-Y") ?>
</span></span>
</p>
<?php endif ?>
</div>
<div class="full-width hidden-overflow mt-5">
<!-- <p class="ticket-close"><i class="fa fa-window-close" aria-hidden="true"></i> Closed on <span class="bolder">17-Aug-2017 </span></p>-->
</div>
</div>
</div>
</div>
</div>
<?php endforeach ?>
</div><!-- end #panels (moved to after the foreach) -->
<?php else : ?>
No Records
<?php endif ?>
Here is the working version with the PHP stripped out: https://jsfiddle.net/ytcw2sot/
Related
Im working on a wordpress page, want to display the content of posts in a specific layout, it work well, but when I add another post, the posts "dos" and "tres", appears inside the post "uno", instead of on his real parent the "nested" div. any clues?
<div class="grid">
<div class="post principal">
<!--show data-->
</div>
<div class="nested">
<?php if($count_post>1){?> <!--if there is more post fill div with data-->
<div class="post uno">
<!--show data-->
</div>
<?php }else{?>
<div class="post uno">
<!--dont show anything but keep the div-->
</div>
<?php } ?>
<?php if($count_post>2){?>
<div class="post dos">
<!--show data-->
</div>
<?php }else{?>
<div class="post dos">
<!--dont show anything but keep the div-->
</div>
<?php } ?>
<?php if($count_post>3){?>
<div class="post tres">
<!--show data-->
</div>
<?php }else{?>
<div class="post tres">
<!--dont show anything but keep the div-->
</div>
<?php } ?>
</div> <!--end nested-->
</div> <!--end grid-->
here it is all the code, the wierd thing is that lets say I have two posts in the array and all is correctly displayed, but when I add another the post "dos" and "tres" changes parent
<?php $the_query = new WP_Query( 'posts_per_page=7' );?>
<!--Obtener la cantidad de post-->
<?php $count_post = $the_query->post_count;?>
<div class="grid">
<div class="post principal">
<!--Obtener la id del post-->
<?php $post_id = $the_query->posts[0]->ID;?>
<!--Obtener la id de la imagen-->
<?php $thumbnail_id = get_post_thumbnail_id($post_id);?>
<!--Obtener source de la imagen-->
<?php $img = wp_get_attachment_image_src( $thumbnail_id, 'full');?>
<img id="img_prin" src="<?php echo $img[0] ?>" alt="">
<a href="<?php echo get_permalink($the_query->posts[0]);?>">
<h2>
<?php echo $the_query->posts[0]->post_name;?>
</h2>
</a>
<?php $content = get_post_field('post_content', $post_id);?>
<p>
<?php echo $content;?>
</p>
</div>
<div class="nested">
<?php if($count_post>1){?>
<div class="post uno">
<?php $post_id1 = $the_query->posts[1]->ID;?>
<?php $thumbnail_id1 = get_post_thumbnail_id($post_id1);?>
<div class="img_post">
<?php $img1 = wp_get_attachment_image_src( $thumbnail_id1);?>
<img src="<?php echo $img1[0] ?>" alt="">
</div>
<div class="cont">
<h5>
<?php echo $the_query->posts[1]->post_name;?>
</h5>
<?php $full_post1 = get_post_field('post_content', $post_id1);?>
<?php echo $excerpt1 = substr($full_post1,0,50).'...';?>
</div>
</div>
<?php }else{?>
<div class="post uno"><div class="img_post"></div><div class="cont"></div>
</div><?php } ?>
<?php if($count_post>2){?>
<div class="post dos">
<?php $post_id2 = $the_query->posts[2]->ID;?>
<?php $thumbnail_id2 = get_post_thumbnail_id($post_id2);?>
<?php $img2 = wp_get_attachment_image_src( $thumbnail_id2); >
<div class="img_post">
<img src="<?php echo $img2[0] ?>" alt="">
</div>
<div class="cont">
<h5>
<?php echo $the_query->posts[2]->post_name;?>
</h5>
<?php $full_post2 = get_post_field('post_content', $post_id2);?>
<?php echo $excerpt2 = substr($full_post2,0,50).'...';?> <!--EXCERPT-->
</div>
</div>
<?php }else{?>
<div class="post dos"><div class="img_post"></div><div class="cont"></div>
</div><?php } ?>
<?php if($count_post>3){?>
<div class="post tres">
<?php $post_id3 = $the_query->posts[3]->ID;?>
<?php $thumbnail_id3 = get_post_thumbnail_id($post_id3);?>
<?php $img3 = wp_get_attachment_image_src( $thumbnail_id3);>
<div class="img_post">
<img src="<?php echo $img3[0] ?>" alt="">
</div>
<div class="cont">
<h5>
<?php echo $the_query->posts[3]->post_name;?>
</h5>
<?php $full_post3 = get_post_field('post_content', $post_id3);?>
<?php echo $excerpt3 = substr($full_post3,0,50).'...';?>
</div>
</div>
<?php }else{?>
<div class="post tres"><div class="img_post"></div><div class="cont"></div>
</div><?php } ?>
</div>
<?php wp_reset_postdata(); ?>
</div>
I have two tabs on a page. Both tabs posses some dynamic data fetched from MYSQL db. While opening popular tab data, clicking "get code" button the modal appears. But in the other tab ending tab,clicking "get code" button the modal does not appear. Why is it so? How to resolve it.
CODE
<ul class="nav nav-tabs responsive-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#popular"><i class="ti-bar-chart"></i>Popular </a> </li>
<li class=""><a data-toggle="tab" href="#ending"><i class="ti-timer"></i> Ending soon</a> </li>
</ul>
<div class="tab-content clearfix" id="myTabContent">
<div id="popular" class="tab-pane counties-pane active animated fadeIn">
<?php
$q=mysqli_query($con," SELECT c.* , sc.* , sm.* ,ca.* from store_category sc INNER JOIN store_manufacture sm ON sm.sm_id=sc.store_id INNER JOIN categories ca ON ca.cat_id=sc.cat_id INNER JOIN coupons c on c.c_sc_id=sc.sc_id where sm.sm_display=1 AND ca.cat_switch=1 limit 10 ");
while($row1=mysqli_fetch_array($q,MYSQLI_ASSOC)) {
$h = strpos($row1['sm_link'], 'http');
?>
<div class="coupon-wrapper row">
<div class="coupon-data col-sm-2 text-center">
<div class="savings text-center">
<div>
<div class="large"><?php echo $row1['c_name'] ?></div>
<div class="small">off</div>
<div class="type"><?php echo $row1['sm_brand_name'] ?></div>
</div>
</div>
</div>
<div class="coupon-contain col-sm-7">
<h4 class="coupon-title"><?php echo $row1['c_description']?></h4>
<p data-toggle="collapse" data-target="#<?php echo $row1['c_id']?>">Shop these <?php echo $row1['sm_brand_name'] ?> deals of the day to save as much...</p> <p id="<?php echo $row1['c_id'] ?>" class="collapse">Don't miss out on all the coupon savings.Get you coupon now and save big</p>
<!-- end:Coupon details -->
</div>
<!-- end:Coupon cont -->
<div class="button-contain col-sm-3 text-center">
<p class="btn-code" data-toggle="modal" data-target="#couponModal<?php echo $row1['c_id']?>" data-id="<?php echo $row1['c_id'] ?>" data-backdrop="false" data-dismiss="modal">
<span class="partial-code"><?php echo $row1['c_code'] ?></span>
<span class="btn-hover">Get Code</span>
</p>
</div>
</div>
<div class="coupon_modal modal fade couponModal" style="background-color: rgba(0, 0, 0, 0.5);" id="couponModal<?php echo $row1['c_id'] ?>" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="ti-close"></i></span> </button>
<div class="coupon_modal_content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center">
<h2><?php echo $row1['c_name'] ?></h2>
<p><?php echo $row1['c_description'] ?></p>
</div>
<div class="row">
<div class="col-sm-12">
<h5 class="text-center text-uppercase m-t-20 text-muted">Click below to get your coupon code</h5></div>
<div class="col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3"> <span class="coupon_icon"><i class="ti-cut hidden-xs"></i></span> <?php echo $row1['c_code'] ?>
</div></div></div> </div></div></div></div>
<?php
}
?>
</div>
<!--ending tab -->
<div id="ending" class="tab-pane counties-pane animated fadeIn">
<?php
$q=mysqli_query($con,"SELECT c.* , sc.* , sm.* ,ca.* from store_category sc INNER JOIN store_manufacture sm ON sm.sm_id=sc.store_id INNER JOIN categories ca ON ca.cat_id=sc.cat_id INNER JOIN coupons c on c.c_sc_id=sc.sc_id WHERE sm.sm_display=1 AND ca.cat_switch=1 AND c.c_date_expired >= CURDATE() AND c.c_date_expired <= DATE(DATE_ADD(CURDATE(), INTERVAL +20 DAY))");
while($row1=mysqli_fetch_array($q,MYSQLI_ASSOC)) {
$h = strpos($row1['sm_link'], 'http');
?>
<div class="coupon-wrapper row">
<div class="coupon-data col-sm-2 text-center">
<div class="savings text-center">
<div>
<div class="large"><?php echo $row1['c_name'] ?></div>
<div class="small">off</div>
<div class="type"><?php echo $row1['sm_brand_name'] ?></div>
</div>
</div>
</div>
<div class="coupon-contain col-sm-7">
<ul class="list-inline list-unstyled">
<li class="sale label label-pink">Ending soon- Last Date:<?php echo $row['c_date_expired'] ?></li>
<li class="popular label label-success">100% success</li>
<li><span class="verified text-success"><i class="ti-face-smile"></i>Verified</span></li>
</ul>
<h4 class="coupon-title"><?php echo $row1['c_description']?></h4>
<p data-toggle="collapse" data-target="#<?php echo $row1['c_id']?>">Shop these <?php echo $row1['sm_brand_name'] ?> deals of the day to save as much...</p> <p id="<?php echo $row1['c_id'] ?>" class="collapse">Don't miss out on all the coupon savings.Get you coupon now and save big</p>
<!-- end:Coupon details -->
</div>
<!-- end:Coupon cont -->
<div class="button-contain col-sm-3 text-center">
<p class="btn-code" data-toggle="modal" data-target="#couponModal<?php echo $row1['c_id']?>" data-id="<?php echo $row1['c_id'] ?>" data-backdrop="false" data-dismiss="modal">
<span class="partial-code"><?php echo $row1['c_code'] ?></span>
<span class="btn-hover">Get Code</span>
</p>
</div>
</div>
<div class="coupon_modal modal fade couponModal" style="background-color: rgba(0, 0, 0, 0.5);" id="couponModal<?php echo $row1['c_id'] ?>" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="ti-close"></i></span> </button>
<div class="coupon_modal_content">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center">
<h2><?php echo $row1['c_name'] ?></h2>
<p><?php echo $row1['c_description'] ?></p>
</div>
<div class="row">
<div class="col-sm-12">
<h5 class="text-center text-uppercase m-t-20 text-muted">Click below to get your coupon code</h5></div>
<div class="col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3"> <span class="coupon_icon"><i class="ti-cut hidden-xs"></i></span> <?php echo $row1['c_code'] ?>
</div></div></div> </div></div></div></div>
<?php
}
?>
</div>
I am having trouble with placing my div's in the right position. I made some changes, but it does not work. I would like to put all elements in one row, but title is not aligning properly with the logo. I thought that the problem is in grid, but it is not.
Here is my code.
<body <?php body_class('compass_theme'); ?>>
<div class="container_24">
<div class="grid_24">
<div class="page_content_wrapper">
<div class="header animated">
<div class="grid_10 alpha">
<div class="logo grid_10 alpha" id="logomob">
<img src="<?php if (compass_get_option('compass_logo') != '') { ?><?php echo compass_get_option('compass_logo'); ?><?php } else { ?><?php echo get_template_directory_uri(); ?>/images/logo.png<?php } ?>" alt="<?php bloginfo('name'); ?> logo"/>
</div>
<div class="titleText grid_14 alpha">
<h1 id="title">
<span id="title-top">Adriatic Yacht</span></br>
<span id="title-bottom">Professionals</span>
</h1>
<h2 id="slogan">We can repair everything, except human lives!</h2>
</div>
</div>
<div class="grid_14 alpha contactIcons" id="desktop">
<div class="grid_6 alpha" id="phone">
<i class="fa fa-phone-square" aria-hidden="true"></i>
<p class="contact">+382-67-507-234</p>
</div>
<div class="grid_6 alpha contactIcons" id="email">
<i class="fa fa-envelope-square" aria-hidden="true"></i>
<p class="contact">info#adriatic-yacht.pro</p>
</div>
<div class="grid_6 alpha contactIcons" id="skype">
<i class="fa fa-skype" aria-hidden="true"></i>
<p class="contact">ID: adriaticyacht</p>
</div>
</div>
<div class="grid_14 alpha1" id="mobile">
<section class="deskContact">
<i class="fa fa-skype" aria-hidden="true"></i>
<p class="contact">ID: adriaticyacht</p>
</section>
<section class="deskContact">
<i class="fa fa-envelope-square" aria-hidden="true"></i>
<p class="contact">info#adriatic-yacht.pro</p>
</section>
<section class="deskContact">
<i class="fa fa-phone-square" aria-hidden="true"></i>
<p class="contact">+382-67-507-234</p>
</section>
</div>
<div class="clear"></div>
</div>
I want to create a little Chat.
The Chat have to look like this:
But the Datainformation list it wrong...
The CSS is done, but I don't know how I can fix it...
Can someone help me?
PHP Code:
<div class="messages messages-img">
<?php while($fetch_ticket_answer = $query_ticket_answer->fetch()) { ?>
<div class="item in">
<div class="image">
<img src="../assets/images/users/user2.jpg">
</div>
<div class="text">
<div class="heading">
<b>Test User</b>
<span class="date"><?php echo htmlentities($fetch_ticket_answer["Time"]); ?></span>
</div>
<?php echo htmlentities($fetch_ticket_answer["Message"]); ?>
</div>
</div>
<?php } while($row_ticket_answer2 = $query_ticket_a_answer->fetch()) { ?>
<div class="item">
<div class="image">
<img src="../assets/images/users/user.jpg">
</div>
<div class="text">
<div class="heading">
<b>User 2</b>
<span class="date"><?php echo htmlentities($row_ticket_answer2["Time"]); ?></span>
</div>
<?php echo $row_ticket_answer2["Message"]; ?>
</div>
</div>
<?php } ?>
</div>
Error I have an unwanted /a> showing up on a display page as Branch Line Card/a>. The link should read Branch Line Card. The error has not appeared until recently. I am not a coder in general - please help! The page link is http://guardianbp.com/branches/
Here is a sample of the code:
<!-- Product Catalog -->
<?php if ( !empty( get_field('branch_product_catalog'))): ?>
<section class="pt-medium pb-medium gray-bg">
<div class="container">
<div class="row">
<div class="col-md-1 col-sm-1 col-xs-1 "></div>
<div class="col-md-10 col-sm-10 col-xs-10 text-center">
<h1><span class="blue">Branch Line Card</span></h1>
<div class="lgbtn-icon-bg">
<a href="<?php the_field('branch_product_catalog'); ?>">
<button type="button" class="btn btn-lg-productcatalog btn-lg">
<i class="fa fa-book fa-5x"></i>
<h2><small>view the</small><br />
<?php the_title(); ?><br />
Branch Line Card</h2>
</button>
</a>
</div>
</div>
<div class="col-md-1 col-sm-1 col-xs-1"></div>
</div>
</div>
</section>
<?php endif; ?>
It looks like a mis-matched delimiter. There appears to be a lone "< a/>" floating between:
</button>
</a>
</div>