Double quotes inside html from no where displaying white space - php

it might be a stupid question but i struggle with finding the source of my problem.I have a white space from no where, pages are saved as utf-8 and my php/html adds some double quotes that generates me white space. If someone can help me with this i would be glad:)
Here is the img
The problem is between col-md-8 and cold-md-4.First function si the left content, second is the right side.
code: 1st function
function arata()
{
global $dbh;
echo'
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="cale"> Acasă <img src="images/sageata.jpg"><span> Sesiuni de instruire </span> </div>
<div id="title_page"><h2>Sesiuni de instruire</h2></div>
<div id="continut">
<div class="box box-solid">
<div class="box-body">
<div class="box-group" id="accordion">
<!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
';
$stmt = $dbh->prepare("SELECT * FROM Sesiune order by ID_Sesiune desc");
$stmt->execute();
while ($row = $stmt->fetch())
{
$id_sesiune=$row['ID_Sesiune'];
$titlu=$row['Titlu'];
$desc=$row['Descriere'];
echo' <div class="panel box box-primary">
<div class="box-header">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#'.$id_sesiune.'">
'.$titlu.'
</a>
</h4>
</div>
<div id="'.$id_sesiune.'" class="panel-collapse collapse">
<div class="box-body">
'.$desc.'
</div>
</div>
</div>';
}
echo' </div>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div></div>';
}
code: 2nd function
function Stiri()
{
global $dbh;
echo'
<div class="col-md-4">
<div id="inscrie"><button type="button" class="btn2 btn-primary2" data-toggle="button">Click aici pentru înscriere<span class="glyphicon glyphicon-chevron-right"></span></button></div>
<div id="search">
<div class="input-group">
<form method="GET" class="cauta" action="cautare.php">
<input type="text" class="form-control" name="cautare" placeholder="Caută în site ...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</form>
</div></div>
<div id="noutati">
<h2>Noutăţi</h2>
<ul>';
$stmt = $dbh->prepare("SELECT * FROM Noutati order by Data desc limit 7");
$stmt->execute();
while ($row = $stmt->fetch())
{
echo '<li>'.$row['Titlu'].'</li>';
}
echo'</ul>
<div id="toate"><button type="button" class="btn3 btn-primary3">Toate noutăţile</button></div>
</div>
</div>
</div>
</div>';
}

───→</div>↲
───→<div class="col-md-4">...
With ↲ being a new line, and ───→ being a tab. You have space! The "quotes" you see are the DOM inspector saying "here's a text node", they're not in the source. All that's in your source, is the whitespace that you put there.
Try:
</div><div class="col-md-4">...

Related

JQuery get siblings value / text in dynamically created element

I want to get the .text() of the sibling customerID from the class"db_record_left" when class="db_record_left" gets clicked.
The whole class="db_record" is dynamical generated. But the console.log(CustID); still prints it for every class="db_record" and not only for the clicked one.
echo'
<div class="db_record" id="potentialCustomer-'.$countPotentialCustomers.'">
<div class="db_record_left">
<div class="db_record_describer">'.$cus_Fname.' '.$cus_Lname.'</div>
<div class="db_record_info_wrapper">
<div class="db_record_info_describer">Adresse:</div>
<div class="db_record_info">'.$cus_Adress.'</div>
<div class="db_record_info">
<span>'.$cus_ZipCode.' </span>
<span>'.$cus_Locality.'</span>
</div>
</div>
<div class="db_record_info_wrapper">
<div class="db_record_info_describer">Fahrzeuge:</div>
'.matchVehicles($cus_Vehicles).'
</div>
</div>
<div class="db_record_right">
<div class="material-icons md-large md-ghost-white-enabeld w-embed">
<span class="material-icons-outlined">navigate_next</span>
</div>
</div>
</div>
<span class="customerID" style="display: none">'.$cus_ID.'</span>
';
This would be the jQuery-code
function checkCustomerInformation(){
$(".db_records_wrapper").on('click', 'div.db_record', function (){
const CustID = $(this).siblings(".customerID").text();
console.log(CustID);
});
}
siblings() gets every matching sibling element. To get only the only following the .db_record which was clicked, use next():
$(this).next(".customerID").text();
Here's a working example:
function checkCustomerInformation() {
$(".db_records_wrapper").on('click', 'div.db_record', function() {
const custID = $(this).next(".customerID").text();
console.log(custID );
});
}
checkCustomerInformation();
.db_record {
margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="db_records_wrapper">
<div class="db_record" id="potentialCustomer-'.$countPotentialCustomers.'">
<div class="db_record_left">
<div class="db_record_describer">$cus_Fname1 $cus_Lname1</div>
<div class="db_record_info_wrapper">
<div class="db_record_info_describer">Adresse:</div>
<div class="db_record_info">$cus_Adress1</div>
<div class="db_record_info">
<span>$cus_ZipCode1</span>
<span>$cus_Locality1</span>
</div>
</div>
<div class="db_record_info_wrapper">
<div class="db_record_info_describer">Fahrzeuge:</div>
matchVehicles($cus_Vehicles1)
</div>
</div>
<div class="db_record_right">
<div class="material-icons md-large md-ghost-white-enabeld w-embed">
<span class="material-icons-outlined">navigate_next</span>
</div>
</div>
</div>
<span class="customerID" style="display: none">$cus_ID1</span>
<div class="db_record" id="potentialCustomer-'.$countPotentialCustomers.'">
<div class="db_record_left">
<div class="db_record_describer">$cus_Fname2 $cus_Lname2</div>
<div class="db_record_info_wrapper">
<div class="db_record_info_describer">Adresse:</div>
<div class="db_record_info">$cus_Adress2</div>
<div class="db_record_info">
<span>$cus_ZipCode2</span>
<span>$cus_Locality2</span>
</div>
</div>
<div class="db_record_info_wrapper">
<div class="db_record_info_describer">Fahrzeuge:</div>
matchVehicles($cus_Vehicles2)
</div>
</div>
<div class="db_record_right">
<div class="material-icons md-large md-ghost-white-enabeld w-embed">
<span class="material-icons-outlined">navigate_next</span>
</div>
</div>
</div>
<span class="customerID" style="display: none">$cus_ID2</span>
</div>

Bootstrap collapse and id

Using php and mysql and bootstrap.
The php and mysql works fine but for the bootstrap, if i am actually calling values from
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
im getting all rows in a given div but if i want to use bootstrap collapse
<button data-toggle="collapse" data-target="#demo">More info</button>
<div id="demo" class="collapse">
<div id="chart_div" style="width: 100%; height: 300px;"></div>
</div>
Since the id of the div will be the same, only 1 will collapse if theres more than 1 row. Even if i used modal, when clicking on the button to display to modal, only for the first value will display
<?php
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){?>
<div class="w3-container w3-card-2 w3-white w3-margin-bottom">
<div class="w3-container">
some stuff`
<button data-toggle="collapse" data-target="#demo">More info</button>
<div id="demo" class="collapse">`
<div id="chart_div" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
<?php }?>
The problem is for the button thanks
If you need unique ids for each row you can do this, for example:
<?php
$i = 0;
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
$current_id = 'id-' . $i;
$i++;?>
<div class="w3-container w3-card-2 w3-white w3-margin-bottom">
<div class="w3-container">
some stuff
<button data-toggle="collapse" data-target="#<?=$current_id?>">More info</button>
<div id="<?=$current_id?>" class="collapse">
<div id="chart_div" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
<?php }?>
In this case you will have unique ids - id-0, id-1, id-2, etc. assigned to each item of your output.
Add data to data-target button attribute and id collapse div attribute to distinct each one.
JSFidlle based on your div
<div class="w3-container w3-card-2 w3-white w3-margin-bottom">
<div class="w3-container">
some stuff`
<button data-toggle="collapse" data-target="#demo">More info</button>
<div id="demo" class="collapse">`
<div id="chart_div" style="">0</div>
</div>
</div>
</div>
<div class="w3-container w3-card-2 w3-white w3-margin-bottom">
<div class="w3-container">
some stuff`
<button data-toggle="collapse" data-target="#demo1">More info</button>
<div id="demo1" class="collapse">`
<div id="chart_div" style="">1</div>
</div>
</div>
</div>
<div class="w3-container w3-card-2 w3-white w3-margin-bottom">
<div class="w3-container">
some stuff`
<button data-toggle="collapse" data-target="#demo2">More info</button>
<div id="demo2" class="collapse">`
<div id="chart_div" style="">2</div>
</div>
</div>
</div>

How to display content from PHP to html

So what i'am trying to do is that I have a PHP page that gets the ID for some text stored in a database (Varchar) and I wish to display this content in my HTML page. So I can update the content in the database and the edit take effect across the site.
PHP:
$id = $_GET['id'];
// do some validation here to ensure id is safe
$link = mysql_connect("localhost", "root", "");
mysql_select_db("images");
$sql = "SELECT review FROM reviews WHERE id=$id";
$result = mysql_query("$sql");
$row = mysql_fetch_assoc($result);
mysql_close($link);
echo $row['review'];
I wish to display the content where is says "PHP content here"
HTML:
<div class="modal fade" id="albumModal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Top right close X -->
<div class="close-modal" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"</span>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<p class="modalTitle">The Beatles: Abby Road</p>
<img src="beatles.jpg" class="img-responsive center-block albumImgGrey">
<!-- Album 1's Review -->
<div class="modalText">
<p>Content upon content upon more content
<p>upon more content</p>
Content upon content upon more content
<p>upon more content</p>
<div class="starcolor">
<span>&#9733 &#9733 &#9733 &#9733 &#9733</span>
</div>
</p>
<!-- PHP content here....... -->
<!-- PHP content here....... -->
<!-- Bottom of the review links -->
<ul class="list-inline item-details">
<li>
Year of release: <strong>3000</strong>
</li>
<li>
Previous Album: <strong>Hippie tree</strong>
</li>
<li>
Following Album: <strong>Backup Plus++</strong>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any help or advice would be greatly appreciated.
Add this code:
<?php echo $row['review'];?>
where you have PHP content here, ensure you include the PHP tags.
STOP USING THE MYSQL EXTENSION, A KITTEN AND TWO PUPPIES DIE ANYTIME YOU DO THIS
Learn pdo or mysqli instead.
You can put your database result in a php file and then Web server will parse that php code and generate the required output.
It should be like.
output.php
<?php
<div class="modal fade" id="albumModal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Top right close X -->
<div class="close-modal" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"</span>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<p class="modalTitle">The Beatles: Abby Road</p>
<img src="beatles.jpg" class="img-responsive center-block albumImgGrey">
<!-- Album 1's Review -->
<div class="modalText">
<p>Content upon content upon more content
<p>upon more content</p>
Content upon content upon more content
<p>upon more content</p>
<div class="starcolor">
<span>&#9733 &#9733 &#9733 &#9733 &#9733</span>
</div>
</p>
<!-- PHP content here....... -->
$id = $_GET['id'];
$link = mysql_connect("localhost", "root", "");
mysql_select_db("images");
$sql = "SELECT review FROM reviews WHERE id=$id";
$result = mysql_query("$sql");
$row = mysql_fetch_assoc($result);
mysql_close($link);
echo $row['review'];
<!-- PHP content here....... -->
<!-- Bottom of the review links -->
<ul class="list-inline item-details">
<li>
Year of release: <strong>3000</strong>
</li>
<li>
Previous Album: <strong>Hippie tree</strong>
</li>
<li>
Following Album: <strong>Backup Plus++</strong>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
?>
<div class="modal-dialog"> <div class="modal-content"> <!-- Top right close X --> <div class="close-modal" data-dismiss="modal"> <span class="glyphicon glyphicon-remove"</span> </div> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <div class="modal-body"> <p class="modalTitle">The Beatles: Abby Road</p> <img src="beatles.jpg" class="img-responsive center-block albumImgGrey"> <!-- Album 1's Review --> <div class="modalText"> <p>Content upon content upon more content <p>upon more content</p> Content upon content upon more content <p>upon more content</p> <div class="starcolor"> <span>&#9733 &#9733 &#9733 &#9733 &#9733</span> </div> </p> <!-- PHP content here....... --> <!-- PHP content
<?php echo $row['content']; ?>
here....... --> <!-- Bottom of the review links --> <ul class="list-inline item-details"> <li> Year of release: <strong>3000</strong> </li> <li> Previous Album: <strong>Hippie tree</strong> </li> <li> Following Album: <strong>Backup Plus++</strong> </li> </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> </div> </div>

print php database value in accordion

I want to print half of the table record in left accordion and remaining half record in right div. I am using the following code. I ahve two column in the table. In which i have record. Example if there are 4 records in the table than first two record should go on left accordion and next two records should go on right side accordion. I am using the following code.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "data";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, price FROM demo";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
print_r($row);
}
} else {
echo "0 results";
}
$conn->close();
?>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="ordinary">
<div class="container">
<div class="row main-row">
<!--left-->
<div class="col-md-6">
<div class="col-inner left-col">
<div class="accordion-group" id="accordion">
<div class="accordion-panel" >
<div class="heading glyphicon-custom">
<h4 class="title left-title">
<a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-plus gly-font "></i><span class="title-panel">Antipasti</span></a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="contain-body">
<div class="su-spoiler-content su-clearfix inner-content">
1
</div>
</div>
</div>
</div>
</div>
</div>
<!--make it 50% -->
<div class="col-inner left-col">
<div class="accordion-group" id="accordion">
<div class="accordion-panel" >
<div class="heading glyphicon-custom">
<h4 class="title left-title">
<a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus gly-font "></i><span class="title-panel">Antipasti</span></a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="contain-body">
<div class="su-spoiler-content su-clearfix inner-content">
2
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- left-col-md-6 ends here -->
<div class="col-md-6 ">
<div class="col-inner right-all">
<div class="accordion-group" id="accordion">
<div class="accordion-panel" >
<div class="heading glyphicon-custom">
<h4 class="title">
<a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus gly-font "></i><span class="title-panel">Antipasti</span></a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="contain-body">
<div class="su-spoiler-content su-clearfix inner-right">
3
</div>
</div>
</div>
</div>
</div>
</div>
<!-- accordian -->
<div class="col-inner right-all">
<div class="accordion-group" id="accordion">
<div class="accordion-panel" >
<div class="heading glyphicon-custom">
<h4 class="title">
<a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="glyphicon glyphicon-plus gly-font "></i><span class="title-panel">Antipasti</span></a>
</h4>
</div>
<div id="panel4" class="panel-collapse collapse">
<div class="contain-body">
<div class="su-spoiler-content su-clearfix inner-right">
4
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
</div> <!-- right-col-md-6 ends here -->
</div>
</div>
</div>
<script type="text/javascript">
var selectIds =$('#panel1,#panel2,#panel3,#panel4');
$(function ($) {
selectIds.on('hidden.bs.collapse show.bs.collapse', function () {
$(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
})
});
</script>
</body>
Try this:
<?php
while($row = fetch_row($result)){
$rows[]=$row;
}
?>
Inside left accordion
<?php
for($i=0;$i < count($rows)/2;$i++){
echo $row[$i]['id']; //or whatever you want
}
?>
Inside right accordion
<?php
for($i=count($rows)/2;$i < count($rows); $i++){
echo $row[$i]['id']; //or whatever you want
}
?>

Database lightbox with jquery only showing first entry of the database

I'm trying to make a page that gets entries from a database and displays them in a <div> called "gallery-item". However the lightbox works, it only shows the first entry of the database. I hope someone can make sense of this code and may be able to help me with my problem.
My html/php/sql
<?php if (isset($_POST["Website"])) {
$query=$db->prepare("SELECT * FROM `portfoliodb`.`website`");
$query->execute();
while ( $row = $query->fetch()){
$website_id = $row['website_id'];
$website_name = $row ['website_name'];
$website_desc_en = $row ['website_desc_en'];
$website_tags = $row ['website_tags'];
$website_image = $row ['website_image'];
$website_type = $row['website_type'];
echo'
<div class="background hidden" id="background"></div>
<a>
<div class="lightbox hidden" id="lightbox">
<div class="box-title hidden" id="box-title">
<h4 class="hidden" id="box-title-h">' . htmlspecialchars($website_name) . '</h4>
<h4 class="close hidden" id="close">X</h4>
</div>
<div class="box-img hidden" id="box-img">
</div>
<div class="box-foot hidden" id="box-foot">
<div class="box-space hidden" id="box-space"></div>
<div class="box-desc hidden" id="box-desc">
<p class="desc-text hidden" id="box-text">'. htmlspecialchars($website_desc_en) .' </p>
</div>
<div class="tag-space-box hidden" id="box-tags-space"></div>
<div class="tag-box hidden" id="box-tags">
<small id="box-small" class="hidden">'. htmlspecialchars($website_tags) .'</small>
</div>
</div>
</div>
</a>
<a>
<div class="gallery-item-web button" id="button">
<p class="gallary-item-text">';
echo htmlspecialchars($website_name);
echo'</p>';
echo '<i class="fa fa-desktop fa-3x position-icon"></i>
</div></a>
';
}}
The gallery shows all entries in the database so that works fine, the only problem is that the lightbox shows the first entry, so if I were to have a database with the entries "Apples, Pears, Oranges", the gallery would display "Apples, Pears, Oranges". But the lightbox would display "Apples" on every single entry.
My Jquery
$(document).ready(function(){
$(".button").click(function(){
$("#background").toggleClass("hidden");
$("#lightbox").toggleClass("hidden");
$("#box-title").toggleClass("hidden");
$("#box-title-h").toggleClass("hidden");
$(".close").toggleClass("hidden");
$("#box-img").toggleClass("hidden");
$("#box-foot").toggleClass("hidden");
$("#box-space").toggleClass("hidden");
$("#box-desc").toggleClass("hidden");
$("#box-text").toggleClass("hidden");
$("#box-tags-space").toggleClass("hidden");
$("#box-tags").toggleClass("hidden");
$("#box-small").toggleClass("hidden");
});
$(".close").click(function(){
$("#background").toggleClass("hidden");
$("#lightbox").toggleClass("hidden");
$("#box-title").toggleClass("hidden");
$("#box-title-h").toggleClass("hidden");
$(".close").toggleClass("hidden");
$("#box-img").toggleClass("hidden");
$("#box-foot").toggleClass("hidden");
$("#box-space").toggleClass("hidden");
$("#box-desc").toggleClass("hidden");
$("#box-text").toggleClass("hidden");
$("#box-tags-space").toggleClass("hidden");
$("#box-tags").toggleClass("hidden");
$("#box-small").toggleClass("hidden");
});
$(".background").click(function(){
$("#background").toggleClass("hidden");
$("#lightbox").toggleClass("hidden");
$("#box-title").toggleClass("hidden");
$("#box-title-h").toggleClass("hidden");
$(".close").toggleClass("hidden");
$("#box-img").toggleClass("hidden");
$("#box-foot").toggleClass("hidden");
$("#box-space").toggleClass("hidden");
$("#box-desc").toggleClass("hidden");
$("#box-text").toggleClass("hidden");
$("#box-tags-space").toggleClass("hidden");
$("#box-tags").toggleClass("hidden");
$("#box-small").toggleClass("hidden");
});
});
(It's pretty bad I know, this is my first time using Jquery)
This is the Jquery for the lightbox, it toggles the class on every item of the lightbox to "hidden". Whih basically makes every item with that class invisible, great for a lightbox.
First off, you don't need to add class of "hidden" to every element. You can just add it to the container element and then all tags inside would also be hidden.
Your main mistake was to have the same ids and classes for all images, you will need to ensure that each image has an unique identifier.
Try my solution: https://jsfiddle.net/3vhv90ce/2/
HTML:
<div class="container1">
<div class="background" id="background"></div>
<a>
<div class="lightbox" id="lightbox">
<div class="box-title" id="box-title">
<h4 class="" id="box-title-h">name</h4>
<h4 class="close" id="close">X</h4>
</div>
<div class="box-img" id="box-img">
</div>
<div class="box-foot" id="box-foot">
<div class="box-space" id="box-space"></div>
<div class="box-desc" id="box-desc">
<p class="desc-text" id="box-text">description</p>
</div>
<div class="tag-space-box" id="box-tags-space"></div>
<div class="tag-box" id="box-tags">
<small id="box-small" class="">tags</small>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="gallery-item-web button" data-id="1">
<p class="gallary-item-text">Click me</p>
<i class="fa fa-desktop fa-3x position-icon"></i>
</div>
<div class="container2">
<div class="background" id="background"></div>
<a>
<div class="lightbox" id="lightbox">
<div class="box-title" id="box-title">
<h4 class="" id="box-title-h">name</h4>
<h4 class="close" id="close">X</h4>
</div>
<div class="box-img" id="box-img">
</div>
<div class="box-foot" id="box-foot">
<div class="box-space" id="box-space"></div>
<div class="box-desc" id="box-desc">
<p class="desc-text" id="box-text">description</p>
</div>
<div class="tag-space-box" id="box-tags-space"></div>
<div class="tag-box" id="box-tags">
<small id="box-small" class="">tags</small>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="gallery-item-web button" data-id="2">
<p class="gallary-item-text">Click me</p>
<i class="fa fa-desktop fa-3x position-icon"></i>
</div>
JS:
$(document).ready(function(){
$(".button").click(function(){
$('.container'+$(this).data('id')).toggleClass("hidden");
});
});
CSS:
.hidden {
display: none;
}
.gallery-item-web {
cursor: pointer;
}
I suppose your problem came from those lines:
<div class="background hidden" id="background"></div>
<div class="gallery-item-web button" id="button">
you have many controls with the same id, And this is ambiguous for jQuery.

Categories