We Keep Coding

jQuery Show/Hide Text Button onclik or Smooth Hide

I would like to make sure which method is the best and if my code is valid and good.
I did not succeed in renaming the text "hide contact" / "'show contact" to see the result.
.style.display = 'none'; seems a bit too brutal to me without an exit animation.
I opted for the "hide button" version
but if you know how to rename the button it will be a bonus.
I also have jerks on mobile (chrome), I can't understand why .slideToggle is not smooth everywhere.
Method 1 : not working
/* Show/hide rename button text */
jQuery(document).on('click', '#TEST_BTN', function(event) {
event.preventDefault();
$(document).ready(function(){
$("TEST_BTN").click(function(){
if ($(this).text() == 'show contact'){
$(this).html('hide contact;')
}else{
$(this).html('show contact');
}
jQuery('#hidden-content').slideToggle('250','swing','hide');
});
Method 2 : working
/* Hide show contact button */
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('#TEST_BTN').click(function(){
event.preventDefault();
document.getElementById("TEST_BTN").style.display = 'none';
jQuery( '#hidden-content' ).slideToggle('250','swing','hide');
});
});

mmm click inside click for the same element?! it'll not work like this it will add another click event each time you click the element and this is what you'll get after some clicks
var i = 0;
$('button').on('click' , function(){
$('button').click(function(){
console.log(i++);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click Inside Click</button>
Your code should looks like
/* Show/hide rename button text */
$(document).ready(function(){
$("#TEST_BTN").click(function(){
$(this).text($(this).text() == 'show contact' ? 'hide contact': 'show contact')
$('#hidden-content').slideToggle('250','swing','hide');
});
});
I prefer to use classes instead of ids in this case .. It'll much easier especially if you've more than one card .. see the next simple example
/* Show/hide rename button text */
$(document).ready(function(){
$(".TEST_BTN").click(function(){
$(this).text($(this).text().toLowerCase().trim() == 'show contact' ? 'hide contact': 'show contact')
$(this).closest('.card').find('.hidden_content').slideToggle('250','swing','hide');
});
});
.hidden_content{
display : none;
height : 100px;
background : #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<button class="TEST_BTN">Show Contact</button>
<div class="hidden_content">Contact Info</div>
</div>
<div class="card">
<button class="TEST_BTN">Show Contact</button>
<div class="hidden_content">Contact Info</div>
</div>
<div class="card">
<button class="TEST_BTN">Show Contact</button>
<div class="hidden_content">Contact Info</div>
</div>
Note: For event.preventDefault() you need to use function(event){ event.preventDefault();

JavaScript Popup window display inside PHP IF Function without onClick

I was following a tutorial on YouTube about how to display a popup box after the click of a button. It was fairly simple but now I want to twist things a little bit. I want to display the markup inside a PHP IF function.
I believe that creating a JavaScript function would be the road to follow but I am not proficient in JavaScript/jQuery as I am only starting with it now.
I want to display the following markup should my PHP IF function equate to TRUE
<div id="popup-box" class="popup-position">
<div class="popup-wrapper"> <!-- move away from screen and center popup -->
<div class="container"> <!-- backgorund of pop up -->
<h2>Pop box<h2>
<p>Close popup</p>
</div>
</div>
</div>
The following JavaScript function is used in the tutorial that I was following. It works perfectly when it is triggered by onClick.
<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
I have the following PHP script
function cart($userEmailAdd){
global $dbc; // database connection variable
/*
Verify if the product that is being added already exists in the cart_product table.
Should it exist in the cart then display popup box with an appropriate
message.
Otherwise, add the product to cart_product
*/
if(isset($_GET['cart'])){
$productID = $_GET['cart'];
$queryCheckCart = "SELECT * from cart_product WHERE emailOfCustomer = '$userEmailAdd' AND cpProductid = '$productID'";
$executeCheckCart = mysqli_query($dbc, $queryCheckCart) or die (mysqli_error($dbc));
if(mysqli_num_rows($executeCheckCart) > 0 ){
/* IF MYSQLI_NUM_ROWS is greater than zero then
it means that the product already exists in the cart_product table.
Then display following markup*/
?>
<div id="popup-box" class="popup-position">
<div class="popup-wrapper"> <!-- move away from screen and center popup -->
<div class="container"> <!-- backgorund of pop up -->
<h2>Pop box<h2>
<p>X</p>
</div>
</div>
</div> <!-- -->
<?php
} else {
$query = "INSERT INTO cart..." ;
// rest of script continues after this for insertion of the product
How do I go about using the same function or a similar one without using onClick to display the markup?

you can just add inline css display:block so that the popup is displayed by default when page load.
<div id="popup-box" style="display:block" class="popup-position">
and then edit the close button of the popup to tell him to call toglle_visibility() onclick
<p>X</p>
of course you will need yo put your toggle_visibility() function in a script tag (better before the closing body element)
<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>

You can do something similar to this:
function cart($userEmailAdd){
global $dbc; // database connection variable
/*
Verify if the product that is being added already exists in the cart_product table.
Should it exist in the cart then display popup box with an appropriate
message.
Otherwise, add the product to cart_product
*/
if(isset($_GET['cart'])){
$productID = $_GET['cart'];
$queryCheckCart = "SELECT * from cart_product WHERE emailOfCustomer = '$userEmailAdd' AND cpProductid = '$productID'";
$executeCheckCart = mysqli_query($dbc, $queryCheckCart) or die (mysqli_error($dbc));
if(mysqli_num_rows($executeCheckCart) > 0 ){
/* IF MYSQLI_NUM_ROWS is greater than zero then
it means that the product already exists in the cart_product table.
Then display following markup*/
?>
<script>
$(document).ready(function(){
toggle_visibility('popup-box');
});
</script>
<div id="popup-box" class="popup-position">
<div class="popup-wrapper"> <!-- move away from screen and center popup -->
<div class="container"> <!-- backgorund of pop up -->
<h2>Pop box<h2>
<p>X</p>
</div>
</div>
</div> <!-- -->
<?php
} else {
$query = "INSERT INTO cart..." ;
// rest of script continues after this for insertion of the product
All you have to do is to tell javascipt that it has to open popup. Here, I made Javascript run function toggle_visibility('popup-box'); after the document loads.
The popup div doesn't have to be inside php's IF statement. And instead of using $(document).ready(function(){ }); you can use onLoad="toggle_visibility('popup-box')" attribute in <body> element.

Instead of executing the html block within the php if clause, you could use a simple boolean variable to indicate whether or not to show the popup:
$showPopup = false;
if(mysqli_num_rows($executeCheckCart) > 0 ){
/* IF MYSQLI_NUM_ROWS is greater than zero then
it means that the product already exists in the cart_product table.
Then display following markup*/
$showPopup = true;
?>
<?php
} else {
Then in your html code you could show the popup based on what the $showPopup has been set to:
<div id="popup-box" <?php echo ($showPopup === false)? 'style="display:none"' : '' ?> class="popup-position">
</div>

php div item click when page reload data gone

i have a div name all contact in which there is many name when i click anyone name this name show me in other div name receiver its work fine problem is this when page reload name gone from reciver div which i click will you please tell me how to made it when page refresh div data not gone untill i go to other page.
#usersOnLine {
font-family:tahoma;
font-size:12px;
color:black;
border: 3px teal solid;
height: 625px;
width: 300px;
overflow-y:scroll;
}
<div id='receiver'>
<h3>receiver</h3>
<!-- NOTICE THAT THIS IS NEW NOW... -->
<!-- IT IS IMPORTANT THAT YOU HAVE THIS PARAGRAPH EXACTLY AS IT IS HERE -->
<p class='bubbled-data'></p>
</div>
<div id = 'contact'>
<h1 align="left"> all contacts </h1>
<div id="usersOnLine">
<h2>
<?php
foreach ($result as $key => $val) {
echo "<span class='clickAble'>" . $val['email'] . "</span>";
echo "<br>";
echo "<br>";
}
?>
</h2>
</div>
</div>
</div>
<!-- JAVASCRIPT - JQUERY -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function (e) {
var receiver = $("#receiver");
var clickAbles = $(".clickAble");
// BIND THE clickAble SPAN TO AN ON-CLICK EVENT...
// SO THAT WITH EACH CLICK, YOU CAN SIMPLE APPEND THE CONTENT OF THAT SPAN TO THE RECEIVER DIV
clickAbles.on("click", function (evt) {
var nameValue = $(this).text();
receiver.find(".bubbled-data").text(nameValue);
$("#reciver_email").val(nameValue);
});
});
})(jQuery);
</script>

So you want retain the name in receiver div after page reload.
You can use html Local Storage,
Refer HTML Local Storage Objects
<script type="text/javascript">
(function ($) {
$(document).ready(function (e) {
var receiver = $("#receiver");
var clickAbles = $(".clickAble");
if(window.performance)
{
if(performance.navigation.type == 1 )
{
var nameValue = localStorage.getItem("nameValue");
receiver.find(".bubbled-data").text(nameValue);
$("#reciver_email").val(nameValue);
receiver.find(".bubbled-data").text(nameValue);
}
}
// BIND THE clickAble SPAN TO AN ON-CLICK EVENT...
// SO THAT WITH EACH CLICK, YOU CAN SIMPLE APPEND THE CONTENT OF THAT SPAN TO THE RECEIVER DIV
clickAbles.on("click", function (evt) {
var nameValue = $(this).text();
receiver.find(".bubbled-data").text(nameValue);
$("#reciver_email").val(nameValue);
localStorage.setItem("nameValue", nameValue);
});
});
})(jQuery);
</script>
Try this.

Add slide to toggle

I am trying to add a slide effect to my toggle script
<script>
function clickitems() {
// action 1
if( document.getElementById('spoiler2').style.display=='none' ){
document.getElementById('spoiler2').style.display='block';
}
else{
document.getElementById('spoiler2').style.display='none';
};
// action 2
if( document.getElementById('spoiler').style.display=='block' ){
document.getElementById('spoiler') .style.display='none';
}
}
</script>
But so far without success, can anyone help me out ? Much appreciated
The elements spoiler and spoiler2 are simple div elements
<div id="spoiler" style="width:300px;height:100%;display:none;"> Txt and image Content</div>
<div id="spoiler2" style="width:300px;height:100%;display:none;"> Txt and image Content</div>
The buttons are <a class="button" onclick="clickitems()">Items</a>
And yes i could have gone with a paragraph tag instead of a link

Ok, so far i got this,
A JavaScript to close the other and Jquery open element while toggling the selected element
<script>
function clickitem() {
if( document.getElementById('spoiler').style.display=='block' ){
document.getElementById('spoiler') .style.display='none';
}
}
</script> </p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#spoiler2").slideToggle("slow");
});
});
</script>

How to hide relevent div when relevent button is clicked

I have a dynamic div's which needed to hide when relevant delete button clicked. This divs also have dynamic id's. i want to hide relevant div where button is clicked. im only getting the first div id all the time. Im new to jQuery can someone please help.
$(document).ready(function(){
$(".reBox").click(function() {
alert($('.reBox').attr('id'));
// $(this).hide();
});
});
<div class="boxx" id="<?php echo $tot_meal; ?>">
<div class="reBox" id="<?php echo $tot_meal; ?>">
<img src="../images/error.png" width="16px" height="16px" />
</div>
</div>

As you have dynamic html elements use .on(). Try this:
$(document).ready(function(){
$(".boxx").on('click','.reBox',(function() {
$(this).hide(); //to hide reBox
$(this).parent("div.boxx").hide(); //to hide boxx element
});
});

Since you have dynamic elements, try event delegation
$(document).on('click', ".reBox", function () {
console.log(this.id);
$(this).hide();
//if you want to close boxx
// $(this).closest('.boxx').hide();
});