I am using this code which contains html along with php, when there are multiple elements in collapse only the first element is working properly because there is id named collapseOne which should change dynamically for each element.
So, the problem is how to change the id dynamically
<div class="accordion">
<?php foreach ($topics_list->result_array() as $row) { ?>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<h2><?php echo $row['name'];
?></h2>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse ">
<div class="accordion-inner">
<b><h3> Material Link-:<?php
echo "<a href='" . $row['link'] . "'>Link</a></h3></b>";
echo"<br> <b><h3>Hardness-:";
echo $row['hardness'] . "</h3></b>";
echo "<br><b><h3>Type-:" . $row['type'] . "</h3></b>";
?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
Increment an index on each iteration and include it in the markup output
<div class="accordion">
<?php
$i=0;
foreach ($topics_list->result_array() as $row) {
$i++;
?>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle"
data-toggle="collapse" data-parent="#accordion2"
href="#collapse<?=$i?>">
<h2><?php echo $row['name'];
?></h2>
</a>
</div>
<div id="collapse<?=$i?>" class="accordion-body collapse ">
<div class="accordion-inner">
<b><h3> Material Link-:<?php
echo "<a href='" . $row['link'] . "'>Link</a></h3></b>";
echo"<br> <b><h3>Hardness-:";
echo $row['hardness'] . "</h3></b>";
echo "<br><b><h3>Type-:" . $row['type'] . "</h3></b>";
?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
Try this ...I can use it
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-primary">
<?PHP
$i = 0;
while($objResult = mysqli_fetch_array($objQuery)) {
$i++;
?>
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?=$i?>" aria-expanded="true" aria-controls="collapseOne">
<?=$objResult["rela_Name"];?>
</a>
</h4>
</div>
<div id="collapseOne<?=$i?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<?=$objResult["rela_Detail"];?>
</div>
</div>
<?PHP
}
?>
</div>
</div>
Related
I have a collapsible FAQ section that sits on each members profile page. I'd like to hide the question and answer if the data field is empty.
<div class="row">
<div class="col-md-10">
<div class="panel panel-default1">>
<div class="panel-heading">
<h3 class="panel-title"><b>Who is the registered manager of <?php echo $user['full_name']?>?</b></h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
<?php echo $user['registered_manager']?> is the registered manager of <?php echo $user['full_name']?>.
</div>
</div> </div>
<div class="col-md-10">
<div class="panel panel-default2">
<div class="panel-heading">
<h3 class="panel-title"><b>How many beds are there at <?php echo $user['full_name']?>?</b></h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
There are <?php echo $user['number_of_beds']?> beds in total at <?php echo $user['full_name']?>.</div>
</div> </div>
<div class="col-md-10">
<div class="panel panel-default3">
<div class="panel-heading">
<h3 class="panel-title"><b>Who owns <?php echo $user['full_name']?>?</b></h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
<?php echo $user['full_name']?> is owned and operated by <?php echo $user['group_name']?>.</div>
</div> </div>
</div>
</div>
<script type="text/javascript">
jQuery(function ($) {
$('.panel-heading span.clickable').on("click", function (e) {
if ($(this).hasClass('panel-collapsed')) {
// expand the panel
$(this).parents('.panel').find('.panel-body').slideDown();
$(this).removeClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
else {
// collapse the panel
$(this).parents('.panel').find('.panel-body').slideUp();
$(this).addClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
});
</script>
.panel-heading span
{
margin-top: -20px;
font-size: 15px;
}
.row
{
margin-top: 40px;
padding: 0 20px;
}
.clickable
{
cursor: pointer;
}
The $user['full_name'] will always be populated so I don't need to worry about that. In question one the field that needs to not be blank is $user['registered_manager']
Question 2 is $user['number_of_beds'] and Question 3 is ```<?php echo $user['group_name']
thanks in advance
You can achieve that by adding CSS class .hidden and checking if $user is empty in PHP
CSS:
.hidden { display: none; }
PHP:
<div class="col-md-10 <?php if( empty($user['registered_manager']) ) echo 'hidden' ?> ">
<div class="panel-heading">
<h3 class="panel-title">
<b>Who is the registered manager of <?php echo $user['full_name']?>
</b>.
</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
<?php echo $user['registered_manager']?> is the registered manager of <?php
echo $user['full_name']?>.
</div>
</div>
You can wrap parts of your html with php if statement which says when to render it. For example this part willl be only rendered when $user['full_name'] is not falsy (empty string, null, zero...).
<?php if ($user['full_name']): ?>
<div class="col-md-10">
...
<?php echo $user['full_name']?>
...
</div>
<?php endif ?>
See more examples here: https://www.w3schools.com/php/php_if_else.asp
I am generating a dynamic nested accordion with unique client ids. Let's say a user needs to do a modification on accordeon 3, he opens the specific accordion and click on the button "modify". The user is then transported to a new form on a new page to do his modification.
After validating his modification, the user needs to return to the previous page with the listed accordion and have only the specific accordion he selected earlier open. Can somebody please assist me?
Here is my code:
<div id="accordionbox">
<?php
if (isset($listeClient) && count($listeClient) > 0) {
?>
<?php
$iClients = 0;
while ($iClients < count($listeClient)) {
$CLIENT_ID = $listeClient[$iClients]['CLIENT_ID'] == "" ? "" : $listeClient[$iClients]['CLIENT_ID'];
$nom = $listeClient[$iClients]['CLIENT_NOM'] == "" ? "" : $listeClient[$iClients]['CLIENT_NOM'];
$prenom = $listeClient[$iClients]['CLIENT_PRENOM'] == "" ? "" : $listeClient[$iClients]['CLIENT_PRENOM'];
$projet[] = $listeClient[$iClients]['projet'];
?>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain<?php echo $iClients; ?>" class="panel-group" aria-multiselectable="true">
<div id="headingClient<?php echo $iClients; ?>" class="panel">
<a class="panel-heading collapsed" title="Tab1"
aria-controls="collapseMain-<?php echo $CLIENT_ID; ?>" aria-expanded="false"
href="#collapseMain-<?php echo $CLIENT_ID; ?>" data-toggle="collapse">
<span class="panel-title"><?php echo $nom . ' ' . $prenom; ?></span>
</a>
<div id="collapseMain-<?php echo $CLIENT_ID; ?>" class="panel-collapse collapse"
aria-labelledby="heading<?php echo $CLIENT_ID; ?>" aria-expanded="false">
<div class="panel-body">
<div id="accordionInside-<?php echo $CLIENT_ID; ?>" class="panel-group"
aria-multiselectable="true" role="tablist">
<!-- Informations Personnelles -->
<div class="panel panel-default">
<a id="headingPersonnelle-<?php echo $CLIENT_ID; ?>"
class="panel-heading collapsed" title="Tab1"
aria-controls="collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
aria-expanded="false"
href="#collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title">Informations Personnelles</span>
</a>
<div id="collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingPersonnelle-<?php echo $CLIENT_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
Personelle
</div>
</div>
</div> <!-- Fin Informations Personnelles -->
<!-- Contracts -->
<div class="panel panel-default">
<a id="headingContract-<?php echo $CLIENT_ID; ?>"
class="panel-heading collapsed" title="Tab2"
aria-controls="collapseContract-<?php echo $CLIENT_ID; ?>"
aria-expanded="false"
href="#collapseContract-<?php echo $CLIENT_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title">Dossiers</span>
</a>
<div id="collapseContract-<?php echo $CLIENT_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingContract-<?php echo $CLIENT_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
<div id="accordionContractBody-<?php echo $CLIENT_ID; ?>"
class="panel-group" aria-multiselectable="true"
role="tablist">
<?php
$iProjets = 0;
while ($iProjets < count($projet[$iClients]['projetz'])) {
$PROJET_ID = $projet[$iClients]['projetz'][$iProjets]['PROJET_ID'];
?>
<div id="accordionContract-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-group rapprocher"
aria-multiselectable="true" role="tablist">
<div class="panel panel-default">
<a id="headingProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-heading collapsed" title="Tab1"
aria-controls="collapse-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
aria-expanded="false"
href="#collapseProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title"><?php echo $projet[$iClients]['projetz'][$iProjets]['PROJET_NOM']; ?></span>
</a>
</div>
<div id="collapseProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
Contracts
</div>
</div>
</div>
<?php
$iProjets++;
}
?>
</div>
</div>
</div>
</div> <!-- Fin Contracts -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
$iClients++;
}
?>
<?php
}
?>
</div>
And here is what i have been trying:
<?php
if (isset($client_id) && $client_id <> "") {
?>
<script>
$(document).ready(function () {
//open all div starting with collapseMain
$("div[id^='collapseMain']").addClass("in");
//open all div starting with collapsePersonnelle
$("div[id^='collapsePersonnelle']").addClass("in");
//open all div starting with collapseContract
$("div[id^='collapseContract']").addClass("in");
//open all div starting with collapseProjet
$("div[id^='collapseProjet']").addClass("in");
//how to open only the specific accordion with the client id
});
</script>
<?php
}
?>
We can see that you have added unique id to all your ".panel-collapse" divs as id="collapseMain-<?php echo $CLIENT_ID; ?>". We also know that you have the id for which you want to open the accordion.
You can use jquery selector $("#collapseMain-<?php echo $client_id; ?>") to select only the accordion that should be opened.
Lets assume the html code generated by php is:
<div id="accordionbox">
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-1" class="panel-group" aria-multiselectable="true">
<div id="headingClient-1" class="panel">
<a class="panel-heading collapsed" title="Tab1"
aria-controls="collapseMain-1>" aria-expanded="false"
href="#collapseMain-1" data-toggle="collapse"><span class="panel-title">Client 1</span></a>
<div id="collapseMain-1" class="panel-collapse collapse"
aria-labelledby="heading1" aria-expanded="false">
<div class="panel-body">
Content 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-2" class="panel-group" aria-multiselectable="true">
<div id="headingClient-2" class="panel">
<a class="panel-heading collapsed" title="Tab2"
aria-controls="collapseMain-2>" aria-expanded="false"
href="#collapseMain-2" data-toggle="collapse"><span class="panel-title">Client 2</span></a>
<div id="collapseMain-2" class="panel-collapse collapse"
aria-labelledby="heading2" aria-expanded="false">
<div class="panel-body">
Content 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-3" class="panel-group" aria-multiselectable="true">
<div id="headingClient-3" class="panel">
<a class="panel-heading collapsed" title="Tab3"
aria-controls="collapseMain-3>" aria-expanded="false"
href="#collapseMain-3" data-toggle="collapse"><span class="panel-title">Client 3</span></a>
<div id="collapseMain-3" class="panel-collapse collapse"
aria-labelledby="heading3" aria-expanded="false">
<div class="panel-body">
Content 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Then you can generate javascript code using php like
<?php
if (isset($client_id) && $client_id <> "") {
?>
$(document).ready(function() {
$("#collapseMain-<?php echo $client_id; ?>").addClass("in");
});
<?php } ?>
You can have a look at this jsfiddle
I'm using this code snippet from Bootstrap:
https://bootsnipp.com/snippets/featured/material-card-reveal-with-image-effect
I then created an Advanced Custom Fields repeater field to show multiple cards. The problem is, once i trigger one card, they all get triggered. Is there a way to separate the action?
Here is my code with the repeater field integrated, the CSS and JS is the same as the Bootstrap demo.
<div class="container">
<div class="row">
<?php if( have_rows('team') ): ?>
<?php while( have_rows('team') ): the_row();
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-3 columns">
<div class="card">
<div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
<button id="show">
<div class="card-content light-grey-bg center text-center">
<span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>
</div>
<div class="card-action blue-bg center text-center valign">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal">
<span class="card-title"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><?php echo $bio; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
The best way to handle this would be to put a unique ID on the modal and accompanying trigger. They are all firing at the same time, because they all have the same trigger. You can use a count to generate the unique ID. Your javascript would also have to be in the loop (or you repeat the loop just for the JS).
<div class="container">
<div class="row">
<?php if( have_rows('team') ): ?>
<?php $count = 1;?>
<?php while( have_rows('team') ): the_row();
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-3 columns">
<div class="card">
<div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
<button id="show<?php echo $count; ?>">
<div class="card-content light-grey-bg center text-center">
<span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>
</div>
<div class="card-action blue-bg center text-center valign">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal panel<?php echo $count; ?>">
<span class="card-title"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><?php echo $bio; ?></p>
</div>
</div>
</div>
<script>
$(function(){
$('#show<?php echo $count; ?>').on('click',function(){
$('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
});
$('.card-reveal panel<?php echo $count; ?> .close').on('click',function(){
$('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
});
});
</script>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
First thing's first: You are repeating this markup, so that ID of show is no longer unique - remove it or make it unique for each repeated item.
Now, I've added a 'show' class to your button:
<button type="button" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
And, in the JavaScript, selected that instead. I've used closest() and next() in order to slideToggle the cardReveal in the current context:
$(function(){
$('.show').on('click',function(){
$(this).closest('.card-content').nextAll('.card-reveal').slideToggle('slow');
});
$('.card-reveal .close').on('click',function(){
$(this).closest('.card-reveal').slideToggle('slow');
});
});
See it working here
Javascript code:
<script>
$(document).ready(function(){
$("#verify").click(function(){
if ($("#cval").val()==$("#captcha").text()){
$("#pop").modal("hide");
var id=$("#captcha").attr("data-id");
if (_ths.hasClass("red")){
$.post(base_url+"index.php/myad/removethumbs",{uniqueid:id},function(){
_ths.removeClass("red");
});
}
else{
$.post(base_url+"index.php/myad/addthumbs",{uniqueid:id},function(){
_ths.addClass("red");
});
}
$("#captcha").val("");
}
else{
$("#cval").val("");
$("#cval").attr("placeholder","invalid captcha");
}
});
function thumb(id,ths){
if (<?=$loggedin?>){
$.post(base_url+"index.php/myad/addthumbs",{uniqueid:id});
$(ths).addClass("red");
}
else{
_ths=$(ths);
var number = Math.floor(Math.random()*90000) + 10000;
$("#captcha").attr("data-id",id);
$("#captcha").text(number);
$("#pop").modal("show");
}
};
function staticthumb(id,ths){
if (<?=$loggedin?>){
if ($(ths).hasClass("red")){
$.post(base_url+"index.php/myad/removethumbs",{uniqueid:id},function(){
$(ths).removeClass("red");
});
}
else{
$.post(base_url+"index.php/myad/addthumbs",{uniqueid:id},function(){
$(ths).addClass("red");
});
}
}
else{
_ths=$(ths);
var number = Math.floor(Math.random()*90000) + 10000;
$("#captcha").attr("data-id",id);
$("#captcha").text(number);
$("#pop").modal("show");
}
};
});
</script>
HTML code:
<div class="col-sm-8" id="lists">
<?php if(isset($products)):?>
<?php foreach($products as $p):?>
<div class="col-md-12">
<div class="product-view row" style="border-bottom:1px solid #eee;margin-bottom:20px;padding:20px 0px 20px 0px;background:#f1f1f1">
<div class="col-sm-3 col-md-3 col-lg-3">
<?php $j = 0;?>
<?php foreach($p['checkbox'] as $checkbox):?>
<?php if($j == 0):?>
<div class="large-image">
<img alt="#" src="<?php echo base_url();?>/uploads/<?php echo $checkbox['Image']?>" />
<div class="image-title"><span class="icon-thumbs-up" onclick="staticthumb(<?php echo $checkbox['UniqueID']?>,this);" id="thumb<?php echo $checkbox['UniqueID']?>" style="font-size:24px;"></span></div>
</div>
<?php endif;?>
<?php $j++;?>
<?php endforeach;?>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="product-label">
<h4><?php echo $p["FullName"];?>, <?php echo $p["Area"];?></h4>
<h5 style="font-size:14px"><span class="icon-calendar"></span> <?php echo $p["SaleDate"];?></h5>
<h5 style="font-size:14px"><span class="icon-clock"></span>
<?php for($i = 0; $i < count($p['StartTime']); $i++):?>
<?php echo $p['StartTime'][$i].'-'.$p['EndTime'][$i]?>
<?php endfor;?>
</h5>
<div data-balloon-length="fit" data-balloon=" <?php echo $p["Address1"].'-'.$p["Postal"];?>" data-balloon-pos="up" ><h5 style="font-size:14px;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><span class="icon-home"></span> <?php echo $p["Address1"].'-'.$p["Postal"];?></h5></div>
<div data-balloon-length="fit" data-balloon=" <?php echo $p["description"];?>" data-balloon-pos="up" ><h5 style="font-size:14px;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><span class="icon-file"></span> <?php echo $p["description"];?></h5></div>
<!--<div class="panel-group accordion-simple" id="product-accordion">
<div class="panel" style="background:#f1f1f1;">
<div class="panel-heading"> <a data-toggle="collapse" data-parent="#product-accordion" href="#product-address" class="collapsed"> <span class="arrow-down icon-arrow-down-4"></span> <span class="arrow-up icon-arrow-up-4"></span> Address </a> </div>
<div id="product-address" class="panel-collapse collapse">
<div class="panel-body"><h5 style="font-size:14px"><?php echo $p["Address1"];?></h5></div>
</div>
</div>
<div class="panel" style="background:#f1f1f1;">
<div class="panel-heading"> <a data-toggle="collapse" data-parent="#product-accordion" href="#product-size" class="collapsed"> <span class="arrow-down icon-arrow-down-4"></span> <span class="arrow-up icon-arrow-up-4"></span> Description </a> </div>
<div id="product-size" class="panel-collapse collapse">
<div class="panel-body"><h5 style="font-size:14px"><?php echo $p["description"];?></h5></div>
</div>
</div>
</div>-->
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="product-label">
<h4>CATEGORY</h4>
<?php foreach($p['checkbox'] as $checkbox):?>
<h5 style="font-size:14px"><?php echo $checkbox['Product']?></h5>
<?php endforeach;?>
</div>
</div>
</div>
</div>
<?php endforeach;?>
<?php else:?>
<h3 style="text-align:center">SORRY THERE IS NO ANY DATA IS AVAILABLE.</h3>
<?php endif;?>
HTML code for captcha validation:
<div class="modal fade bs-example-modal-sm" id="pop" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Please verify captcha</h4>
</div>
<div class="modal-body">
<h4 id="captcha" class="text-center"></h4>
<hr>
<div class="form-group">
<input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="verify">Verify</button>
</div>
</div>
</div>
</div>
when I am a clicking on thumb it displaying me function staticthumb is not defined. but in reality you can see that I wrote function staticthumb I declared staticthumb function but still it displaying error so please help me. right now I am helpless so please help me and try to resolve my issue and thanks in advance.
A Function declaration in JavaScript has Functional Scope, meaning it is only accessible from within the function in which it is declared. If it is not declared in a function, it is in global scope.
You are declaring your staticthumb function within an anonymous function so it will only be available within that scope. The easiest fix is to move the function declaration out of the anonymous function, which will pollute your global variable space ( which you would want to generally avoid, but that is a topic on its own)
TL;DR; Move your staticthumb function to the first line right after your <script> tag before your $(document).ready.
I have looked at a few of the other answers to this question, but I have still not been able to get it done correctly. I have two unordered lists. One is dynamically created from a database table. The other is just a static table that begins empty. Each list contains, or will contain, list elements with nested anchor and awesome-font icon elements. My goal is to be able to, upon clicking the icon, transfer the list element from one list to the other, while changing the icon from a plus to minus sign. So far, I can successfully transfer items from the dynamic list to the static one, and I can change the icons, but I can not figure out how to transfer them back to the original list.
Here's my html:
<div class="row" id="constructTable">
<div class="col-md-6">
<h1>Choose your Columns:</h1>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" id="heading1" role="tab">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1" class="collapsed"><span style="font-size: 16px;">Candidate Data</span></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1" aria-expanded="false" style="height:0px;">
<ul class="list-group choose" id="candidate">
<li class="list-group-item" id="candidate0">
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;">First Name</span>
</li>
<li class="list-group-item" id="candidate1">
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;">Last Name</span>
</li>
</ul>
</div>
</div>
</div>
<?php $counter = 2; ?>
<?php foreach ($mergedTests as $test): ?>
<?php $count=0 ?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" style="margin-top:-10px;">
<div class="panel panel-default">
<div class="panel-heading" id="heading<?php echo $counter; ?>" role="tab">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $counter; ?>" aria-expanded="false" aria-controls="collapse<?php echo $counter; ?>" class="collapsed">
<span style="font-size: 16px;"><?php if( ! $test->example ): ?><?php echo $test->example; ?> Data<?php else: ?><?php echo $test->example; ?> Data<?php endif; ?></span>
</a>
</h4>
</div>
</div>
<?php $label = explode(",", $test->subtestLabel); ?>
<div id="collapse<?php echo $counter; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $counter; ?>" aria-expanded="false" style="height:0px;">
<ul class="list-group" id="<?php echo $test->subTestAbbreviation; ?>">
<?php if ( ! $test->testMakerTestId) : ?>
<?php foreach($label as $category): ?>
<li class="list-group-item" id="<?php echo $test->example; ?><?php echo $count; ?>" >
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> <?php echo $category; ?></span>
</li>
<?php $count++; ?>
<?php endforeach; ?>
<?php else: ?>
<li class="list-group-item" id="<?php echo $test->subTestAbbreviation; ?>0">
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> Raw Score</span>
</li>
<li class="list-group-item" id="<?php echo $test->subTestAbbreviation; ?>1">
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> Percentile</span>
</li>
<?php endif; ?>
</ul>
</div>
</div>
<?php $counter++; ?>
<?php endforeach; ?>
</div>
<div class="col-md-6">
<h1>Arrange Your Columns:</h1>
<ul class="list-group ui-sortable" id="selectedColumns">
</ul>
</div>
</div>
</div>
And my JQuery attempt so far:
$('li a').click(function(){
var parentId = $(this).parent().attr('id');
$(this).find($(".fa")).removeClass('fa-plus').addClass('fa-minus');
$("#selectedColumns").append($("#" + parentId));
});
// Move selection from Arrange Your Columns back to Choose Your Columns
$('ul#selectedColumns').click(function(){
var parentId = $(this).parent().attr("id");
console.log(parentId);
transferId = parentId.slice(0, -1);
$("#" + parentId).find($(".fa")).removeClass('fa-minus').addClass('fa-plus');
$("#" + transferId).append($("#" + parentId));
});
Any help would be greatly appreciated.
Ok here you may need to use names for these lists, the target is selectedColumns, and the source is unordered lists has some database generated id. I will put a class name source-list to your datbase generated lists.
We can use this class name as a common selector of source lists and since the dom will change via user interaction we should use .on instead of .click binding.
First we send a clone of the selected item to selectedColumns and hide the original one so we wont have to find exact place of the element to roll back;
$(".source-list").on("li a","click", function(e) {
// get id of element for further reference
var itemId = $(this).attr("id");
// clone the item to a variable
var cloneItem = $(this).parent().clone();
// change the appearence of cloned item
cloneItem.find($(".fa")).removeClass('fa-plus').addClass('fa-minus');
// append cloned item to selectedColumns
cloneItem.data("id", itemId).removeAttr('id').appendTo("#selectedColumns");
// hide the original item
$(this).hide();
});
$("#selectedColumns").on("li a","click", function(e) {
var itemId = $(this).data("id");
$(this).remove();
$(itemId).show();
});
Since this code has alot of errors / typos, i have created a fiddle for this,
https://jsfiddle.net/wxsnagr9/7/
Looks to me like what you have should be fine for the most part, you should just fix the selectors (also, using event delegation will save you from needing to bind data/recheck parent locations):
$('#candidate').click('li a', function(){
$(this).find(".fa").removeClass('fa-plus').addClass('fa-minus');
$(this).parent().appendTo($("#selectedColumns"));
});
$('#selectedColumns').click('li a', function(){
$(this).find(".fa").addClass('fa-plus').removeClass('fa-minus');
$(this).parent().appendTo($("#candidate"));
});