Jquery solution for dropdown div boxes from a php while echo loop
I am stuck in a problem with the dropdown div from my php echo while loop.
I am trying to toggle my hidden divs with jquery but the problem is that the .next() doesnt get the hidden foe each loop.
I know how to toggle , hide , and do some other things with jquery but i am only good when the divs are spesific or are just a few.
I was experimenting with .(next) jquery code and it worked only for simple divs(one beside the other)...But the echoed divs have some children divs inside of others so the .(next) doesnt get my hidden div and i dont get nothing!
I found a solution with simple javascript and triggering the onClick event but i want to change it back to jquery so i can add a .slideToggle("slow") effect on it.
I have tryied getting the attributes using .attr(OnClick) and then using it to toggle the targeted div which is the hidden one but it just doesnt happen...!!!
I am asking if someone can give me a permianent solution for multipull divs in a page... and instead of two buttons hide/show to change it back to one button.
FYI : 1 the children div ids are different for every loop that i echo so that jquery can handle the desired div 2. i dont have any problems in the php part... 3.I searched a lot of places but the only solution i found was the .next()
And here is the simple code in javascript that i am experimenting on: The code has 2 echoed loops so you know about how it is and its like this because i used it only in notepad and quick styled it..You can paste in your notepad and understand what i mean.Normaly i should have 10 loops... Thanks a lot :-) Have a nice day !
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.`enter code here`/jquery.min.js"></script>
<script type="text/javascript">
function showHideContent(id, show)
{
var elem = document.getElementById(id);
if (elem)
{
if (show)
{
elem.style.display = 'block';
elem.style.visibility = 'visible';
}
else
{
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}
</script></head><body>
<div id='blockinfo'style="border:1px solid black; width:500px">
<div style='float:left;border:1px solid black;'width='70px'>Some Image</div>
<span>some info</span><br>
<div class='blockinfo1' style=' margin-top:-10px;'>
<button style='border:1px solid black; letter-spacing:1px; margin-left:100px;''
onclick="showHideContent('hiddendiv1', false);">hide
</button>
<button style='border:1px solid black; letter-spacing:1px; margin-left:100px;'
onclick="showHideContent('hiddendiv1', true);">show
</button>
</div>
<br>
<div id='hiddendiv1'style='background-color:black; display:none; width:500px; height:200px;'>
<h1 style="color:white;"> more info </h1></div>
<div id='b开发者_StackOverflow中文版lockinfo'style="border:1px solid black; width:500px">
<div style='float:left;border:1px solid black;'width='70px'>Some Image</div>
<span>some info</span><br>
<div class='blockinfo2' style=' margin-top:-10px;'>
<button style='border:1px solid black; letter-spacing:1px; margin-left:100px;''
onclick="showHideContent('hiddendiv2', false);">hide
</button>
<button style='border:1px solid black; letter-spacing:1px; margin-left:100px;'
onclick="showHideContent('hiddendiv2', true);">show
</button>
</div>
<br>
<div id='hiddendiv2'style='background-color:black; display:none; width:500px; height:200px;'>
<h1 style="color:white;"> more info </h1>
</div>
</body><html>
The first issue I notice is that your wrapper divs have the same ID. Change this to class="blockinfo". Also give your hidden divs a specific class as well.
$(document).ready(function(){
$('.blockinfo button').click(function() {
$(this).next('.hidden').toggle();
});
});
I really think the best suggestion I can give you is to look at jQuery UI accordion even though I don't think its an exact fit. You really need to seperate the style into CSS and look at making your HTML compliant
Good Luck
加载中,请稍侯......
精彩评论