I have installed Joomla 3 and Im trying select an element from multiple elements with the same class, but when I apply onmouseover event on the element, the function affect all elements with same class, I want the function affect to select element (onmouseover element)
function ocultarDatos() {
var itemk2 = document.querySelectorAll(".encabezado");
for (var i = 0; i < itemk2.length; i++) {
itemk2[i].style.display = "none";
}
}
<span class="catItemImage" onmouseover="ocultarDatos();">
<a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="height:auto;" />
</a>
<a rel="author" href="<?php echo $this->item->author->link; ?>"><img class="globo" src="<?php echo $this->item->author->avatar; ?>" alt="<?php echo K2HelperUtilities::cleanHtml($this->item->author->name); ?>" >
</a>
</span>
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
<div class="itemContainer itemContainerLast" style="width:12.5%;">
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</div>
Try using var itemk2 = $(this).find(".encabezado");
instead of var itemk2 = document.querySelectorAll(".encabezado");
This should achieve the effect you are looking for
You need to pass event object in callback. and then you can use that event object to find current object and its child such as element with encabezadoclass in your case.
Try below code.
HTML
<span class="catItemImage" onmouseover="ocultarDatos(event);">
... ...
</span>
JS
function ocultarDatos(event){
var encabezado = event.currentTarget.querySelectorAll('.encabezado');
encabezado[0].style.display = "none";
};
Working Demo:
function ocultarDatos(event){
var encabezado = event.currentTarget.querySelectorAll('.encabezado');
encabezado[0].style.display = "none";
};
function ocultarDatosOther(event){
var encabezado = event.currentTarget.querySelectorAll('.encabezado');
encabezado[0].style.display = "";
};
<div onmouseover="ocultarDatos(event);" onmouseout="ocultarDatosOther(event);">
MouseOver on me.
<span class="encabezado">
and i will hide
</span>
</div>
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
<div class="itemContainer itemContainerLast" style="width:12.5%;">
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</div>
I Have fixed it with CSS:
.encabezado { background: white; padding: 0px 15px; display:none; } .itemContainer:hover .encabezado { padding: 0px 15px; display:block; top: 150px; z-index: 100; }
With the effect i was searching for. Thanks for you attention.
Related
I am using https://masonry.desandro.com/ v4.2.2 and the minimal code looks like:
<div class="fk-grid-container" id="ajax-concepts">
<?php
//This is just the wordpress loop and currently its looping and showing 3 items
//LOOP START
while ( $the_query->have_posts() ) :
$the_query->the_post();
$thumbnail_url = get_the_post_thumbnail_url('','full');
?>
<div class="fk-grid-item">
<a href="<?php echo $thumbnail_url; ?>" class="gallery-link">
<div
class="boxes"
data-aos="fade-down"
data-aos-duration="2000"
>
<div class="images-box">
<img
src="<?php echo $thumbnail_url; ?>"
class="img-fluid"
alt="<?php the_title(); ?>"
/>
</div>
</div>
</a>
</div>
<?php
//LOOP END
endwhile;
wp_reset_postdata();
?>
</div>
And, I have initalized it as :
jQuery(".fk-grid-container").imagesLoaded(function () {
jQuery(".fk-grid-container").masonry({
itemSelector: ".fk-grid-item",
gutter: 30,
});
AOS.refresh();
});
Upto this point its fine, now on click load more, I am making an ajax call and on success it is returning html as:
<div class="fk-grid-item">
<a href="http://famous.test/wp-content/uploads/2021/08/02.png" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box"><img src="http://famous.test/wp-content/uploads/2021/08/02.png" class="img-fluid" alt="Image 3" /></div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="http://famous.test/wp-content/uploads/2021/08/05.png" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box"><img src="http://famous.test/wp-content/uploads/2021/08/05.png" class="img-fluid" alt="Image 2" /></div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="http://famous.test/wp-content/uploads/2021/08/06.png" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box"><img src="http://famous.test/wp-content/uploads/2021/08/06.png" class="img-fluid" alt="Image 1" /></div>
</div>
</a>
</div>
and my ajax success:
success: function(data){
var $data = jQuery(data);
if($data.length){
jQuery(".fk-grid-container").append(data).masonry( 'reloadItems' );
AOS.refresh();
}
},
But, with this code the image are not aligned to correct position and is displayed as:
This is what it looked initially:
What it should look like:
Update:
I have tried with:
var $grid = $('.fk-grid-container');
$grid.masonry()
.append( $data )
.masonry( 'appended', $data )
.layout();
AOS.refresh();
I have tried with above code, it is adding the new content but it is not increasing the height of current container and instead overlapping over next container. With this the load data button is covered by the data so I can't make another request.
On load more, it looks like you are not making use of imagesLoaded correctly.
Let's take a look at your initialization code:
jQuery(".fk-grid-container").imagesLoaded(function () {
jQuery(".fk-grid-container").masonry({
itemSelector: ".fk-grid-item",
gutter: 30,
});
AOS.refresh();
});
above one is correct
But, on success (according to your last update) you are doing as:
var $grid = $('.fk-grid-container');
$grid.masonry()
.append( $data )
.masonry( 'appended', $data )
.layout();
AOS.refresh();
Actually, the above code is somehow correct you just need to update the layout once all the images are loaded and you have to update that layout part to masonry (because it looks like you are using jquery). Just like here, mentioned in the first block https://masonry.desandro.com/methods.html
So, the final code should look like this:
var $grid = $('.fk-grid-container');
//appending the data on the grid
$grid.masonry()
.append( $data )
.masonry( 'appended', $data );
$grid.imagesLoaded(function(){
//once images are fully loaded, you update the layout
$grid.masonry();
AOS.refresh();
});
Hope, it helps
You need to use appended & reloadItems method after click to to Load More button and then call imageLoaded method to check all images are loaded or not then again need to call layout method in masonry for adjusting(update) items.
Helpful links for masonry methods:
https://masonry.desandro.com/methods.html#layout-masonry
https://masonry.desandro.com/methods.html#appended
https://masonry.desandro.com/methods.html#reloaditems
I hope below snippet will help you a lot.
var $grid = $('#ajax-concepts') //grid container
$grid.imagesLoaded().done(function (instance) {
$grid.masonry({
itemSelector: ".fk-grid-item",
gutter: 30,
});
// Initialize AOS plugin
AOS.init();
});
// $data like ajax success items
var $data = `<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x650/099900/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x300/999000/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x220/000000/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>`;
$(document).on('click', '#loadmore', function() {
$grid.masonry().append($data).masonry('appended', $data).masonry('reloadItems');
$grid.imagesLoaded(function () {
//once images are fully loaded, you update the layout
$grid.masonry('layout');
// Initialize AOS plugin after append new items
AOS.init();
//Page scroll down at load more button
$('html, body').animate({
scrollTop: $("#loadmore").offset().top
},1500);
});
});
* { box-sizing: border-box; }
.fk-grid-container{
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.fk-grid-container:after {
content: '';
display: block;
clear: both;
}
.fk-grid-item{
max-width: calc(33.333333% - 30px);
margin-bottom: 30px;
}
.img-fluid{
max-width: 100%;
display: block;
}
#media(max-width: 768px){
.fk-grid-item{
max-width: calc(50% - 30px);
}
}
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<div class="fk-grid-container" id="ajax-concepts">
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x500/0000FF/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x300/FF00FF/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x600/00FFFF/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
<div class="fk-grid-item">
<a href="#" class="gallery-link">
<div class="boxes" data-aos="fade-down" data-aos-duration="2000">
<div class="images-box">
<img src="https://via.placeholder.com/400x450/09F900/" class="img-fluid" alt="Title" />
</div>
</div>
</a>
</div>
</div>
<div style="text-align: center; padding: 20px; clear: both;">
<button type="button" style="padding: 10px 40px;" id="loadmore">Load More</button>
</div>
code i have written below is working fine but at the end of the looping the div is not closed its still opening a loop
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
$split++;
if ($split % 4 == 0){
echo '</div></div><div class="item"><div class="row">';
}
}
?>
</div>
</div>
</div>
The Div has splited very well but in end of the loop div has not been closed. Thats only the problem please provide me the help to sort out the problem
When I inspect the element the last loop will show at the given result as follows:
<div class="col-sm-3">
<div class="col-item">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/1557301934.jpg" alt="User one">
</div>
<div class="info">
<div class="name">UPHOLSTERY</div>
<div class="degination">UPHOLSTERY</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div></div><div class="item"><div class="row">
I want to remove the two opening div's as dynamically. How can i set this to remove opened div's at then end of the looping
You can do this:
<div class="carousel-inner">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="item <?php if($i==1) echo "active";?>">
<div class="row">
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
I've created a custom page template where i use WordPress posts to get images ( using feature images ) and I have made a gallery out of them.
<div class="box">
<img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
<div class="middle">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
</div>
Now, what i want to achieve is to remove .middle class when the HREF is empty.
Tried a lot of i found on stack overflow but none of them was successful till now.
Thank you.
Considering that the_field("peoplelink") is empty:
<div class="<?php echo empty(the_field("peoplelink")) ? 'middle' : ''; ?>">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
You could try this:
<div class="<?php if (the_field("peoplelink")){ echo 'middle'; } ?>">
You could do something like this:
$('.middle').filter(function() {
return $("a", this).attr("href") == "";
}).removeClass("middle");
Demo
$('.middle').filter(function() {
return $("a", this).attr("href") == ""
}).removeClass("middle")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
<div class="middle">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
</div>
You could do something like this (untested):
if ($(".middle .pyete-vete a").attr('href') != '') {
$(".middle").removeClass("middle");
}
Using the jQuery each function to loop through all a tags and check if href is empty.
$('a').each(function(e){
if($(this).attr('href')=='')
$(this).closest('.middle').remove()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
<div class="middle">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
<div class="middle">
<div class="pyete-vete">
PYETE
</div>
</div>
</div>
I've been reading about this and trying different things without success. I have a loop with different posts and I have a button that when I press on it there is a modal opened to share the post.
I was trying to add a unique ID to each modal so when I click on it open the correct modal with the correct share links. However is not working.
This is the code I am using inside my modal:
<a id="myBtn-<?php echo $post_id; ?>" href="#"><span class="share-text">Compartir</span></a>
<!-- The Modal -->
<div id="myModal-<?php echo $post_id; ?>" class="modal-share">
<!-- Modal content -->
<div class="modal-share-content">
<div class="wrapper">
<div class="modal-share-header">
<span class="close-share">×</span>
<h2>¿Dónde quieres compartirlo?</h2>
<h3><?php the_title(); ?></h3>
<div class="date"><?php
$dateformatstring = "D d M";
$unixtimestamp = strtotime(get_field('fecha'));
echo date_i18n($dateformatstring, $unixtimestamp);
?></div>
</div>
<div class="modal-body">
<ul>
<li class="mobile-only"><a class="share-whatsapp" target="_blank" href="whatsapp://send?text=<?php the_permalink(); ?>" data-action="share/whatsapp/share"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
<li class="mobile-only"><a class="share-messenger" target="_blank" href="fb-messenger://share?link=<?php the_permalink(); ?>"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
<li class="desktop-only"><a class="share-messenger" target="_blank" href="https://www.facebook.com/dialog/send?app_id=1385443625036469&redirect_uri=http://www.fanonfire.com/gracias-por-compartir/&display=popup&link=<?php the_permalink(); ?>"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
<li class="fb"><a class="share-facebook" target="_blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li class="tw"><a class="share-twitter" target="_blank" href="https://twitter.com/share?url=<?php the_permalink(); ?>&lang=es&text=Vente a <?php the_title(); ?> en Madrid via #fanonfire"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
And the script:
<script>
var modal = document.getElementById('myModal-<?php echo $post_id; ?>');
var btn = document.getElementById("myBtn-<?php echo $post_id; ?>");
var span = document.getElementsByClassName("close-share")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
So as I understand when I click on the for example myBtn-1 I must get the modal myModal-1. However I get always the last modal of all my available posts and looking at my code is "working fine".
Any idea?
Thank you!
You would have to add the $post_id to your vars.
Right now you're overwriting btn in every subsequent script (assuming you are echoing thatz script inside your post_id loop).
However this entire approach is bad. Use jQuery to assign the same code to all your links. In the link code, find the elements by going up to the container <div>, then back to the classes.
(function($) {
$(document).ready(function() {
$(".showModal").click(function(e) {
e.preventDefault();
e.stopPropagation();
$parent = $(this).parent();
$(".modal-share").hide();
$parent.find(".modal-share").show();
});
$(".close-share").click(function(e) {
$(this).parent().hide();
});
$(document).click(function(e) {
if (!$(e.target).hasClass("modal-share"))
$(".modal-share").hide();
});
});
})(jQuery);
.post {
background-color: grey;
margin: 1rem;
position: relative
}
.modal-share {
position: absolute;
left: 0;
bottom: 0;
width: 200px;
background-color: green;
border: 2px solid red;
display: none
}
.close-share {
position: absolute;
right: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<p>
Post One
</p>
<a class="showModal" href=""><span class="share-text">Compartir</span></a>
<div class="modal-share">Modal One<span class="close-share">X</span></div>
</div>
<div class="post">
<p>
Post Two
</p>
<a class="showModal" href=""><span class="share-text">Compartir</span></a>
<div class="modal-share">Modal Two<span class="close-share">X</span></div>
</div>
<div class="post">
<p>
Post Three
</p>
<a class="showModal" href=""><span class="share-text">Compartir</span></a>
<div class="modal-share">Modal Three<span class="close-share">X</span></div>
</div>
The solution is very simple:
add the ID to your button as data-target="#ViewDevice-<?php the_ID(); ?>
then add the same id to your modal like id="ViewDevice-<?php the_ID(); ?>
The full code example is below
<button type="button" class="defaultbtn" data-toggle="modal" data-target="#ViewDevice-<?php the_ID(); ?>" >open my unique modal thanks to #jerryurenaa</button>
<div class="modal fade" id="ViewDevice-<?php the_ID(); ?>">
<div class="modal-dialog modal-dialog-centered modal-lg ">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">title goes here or make it dynamic :D </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>make content dynamic as needed</p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button href="/" class="btn btn-primary"> website</button>
</div>
</div>
</div>
</div>
How can I access seemore button to all next seemore buttons? It only works for first one. How can I make it -show dynamic ids so it will work for all seemore buttons?
javascript:
<script type="text/javascript">
function changeClass() {
if (content.classList.contains("show")) {
btn.innerHTML = "Show Less";
} else {
btn.innerHTML = "Show More";
}
}
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
php:
<?php
$id1 = $_SESSION['id'];
$sql = "select fname from User_registration where U_id=$id1";
$result = mysql_query($sql ,$conn);
$row = mysql_fetch_array($result);
$sql1 = "select * from Job_post where u_id=$id1";
$result1 = mysql_query($sql1,$conn);
$row1 = mysql_fetch_array($result1);
$c = $row1[job_category];
?>
<div class="job" style="background-color:#E2F5D0;width:100%;">
<div class="container" id="jobcontainer">
<div class="row" id="jobrow">
<div class="col-sm-12" id="jobcol">
<h1 class="jobh"> Ciao <?php echo $row['fname'];?> </h1>
<h3 class="jobh3">This is job_posting page. with description and budget
as per categories and sub categories. profile details are show here.
This is job_posting page. with description and budget
as per categories and sub categories. profile details are show here. </h3>
</div>
</div>
<div class="row" id="jobrow1">
<div class="col-sm-8">
Description
</div>
<div class="col-sm-4">
Budget
</div>
</div>
<?php
$sql2 = "select * from Job_post where job_category='$c'";
$resultr = mysql_query($sql2,$conn);
$index = 0;
while($row4 = mysql_fetch_array($resultr)) { ?>
<div class="row" id="jobrow2">
<div class="col-sm-8">
<h3 class="jobh33"> <?php echo $row4[project_name]; ?> </h3>
<h3 class="jobh3">
<?php $row2 = $row4['project_description'];
echo substr($row2, 0, 250);?>
<br>
See more. </h3>
<div id="example" class="more">
<h3><?php echo substr($row2,250);?></h3>
<h3>See less.</h3>
</div>
<br>
<div class="col-sm-4">
<?php echo $row4['job_category'];?>:
<div class="jobh3">
<?php echo $row4['job_sub_category'];?>
</div>
</div>
<div class="col-sm-4">
Location:
<div class="jobh3">
<?php echo $row4['job_location'];?>
</div>
</div>
</div>
<div class="col-sm-4">
<h3 > <?php echo $row4['budget'];?> </h3>
<button type="button" class="btn btn-success"> Fai I'Offeria </button>
</div>
</div>
<?php }?>
</div>
</div>
You will want to use classes to do this. I am using jQuery because I don't know how to do this sort of thing with raw javascript:
<div class="group">
<span class="name">Joe</span>
<div class="moreinfo" style="display: none;">
Stuf that is hidden about joe
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
<div class="group">
<span class="name">Frank</span>
<div class="moreinfo" style="display: none;">
Stuf that is hidden about frank
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
<div class="group">
<span class="name">Jitendra</span>
<div class="moreinfo" style="display: none;">
Stuf that is hidden about this OP
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
function ClickParent(ClickElem,ElemFind)
{
$("."+ClickElem).click(function() {
var GetGrp = $(this).parents(".group");
GetGrp.find("."+ElemFind).fadeToggle();
});
}
// Find one level
ClickParent('name','moreinfo');
// Find another level
ClickParent('moreinfo','evenmore');
</script>
DEMO:
http://jsfiddle.net/qfqbmw2h/