i have a section in my website that needs to be toggled by clicking on the title .
now i wrote this code to toggle when clicking on title
$(document).ready(function(){
$(".toggle_container").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
html part :
<h4 class="trigger">'.$row[title].'</h4>
<div class="toggle_container">
<div class="block">
'.$row[text].'
</div>
</div>
now with these codes everything goes fine , untill it just opens every title clicked and not closes opened ones ;
1st
now i have to change this script in a way that when i click on a title to toggle first check opened ones and close those first
2nd
and the other thing im wondering is how to make the first title to be opened already ,
when the page loaded the first title to be opened
thanks in advance
I was hoping one of the other answers would update and fix this, but both of them never toggle, they always show, here's how to toggle and hide the others like you want:
$(function(){
$(".toggle_container:gt(0)").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow")
.siblings(".toggle_container").slideUp();
});
});
You can try out a demo here, it shows the first on load, and correctly toggles the rest.
This should do it I guess
$(document).ready(function(){
$(".toggle_container").hide();
$(".toggle_container:first").show();
$("h4.trigger").click(function(){
$(".toggle_container").hide();
$(this).toggleClass("active").next().slideToggle("slow");
});
});
Html
<h4 class="trigger">Title1</h4>
<div class="toggle_container">
<div class="block">
Test
</div>
</div>
<h4 class="trigger">Title2</h4>
<div class="toggle_container">
<div class="block">
Test
</div>
</div>
<h4 class="trigger">Title2</h4>
<div class="toggle_container">
<div class="block">
Test
</div>
</div>
Javascript
$(document).ready(function(){
$(".toggle_container:gt(0)").hide();
$("h4.trigger").click(function(){
$(".toggle_container:visible").slideUp('slow');
$(this).toggleClass("active").next().slideToggle("slow");
});
});
You can check working demo at http://www.jsfiddle.net/XnV69/3/
Related
I split my body content in two parts. The left one has a map and buttons. When I click on the button, I get the result from Arad.php in another window.
How can I set the target to the second half (split right) of my body?
<body>
<div class="split left">
<div class="centered">
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="Harta_Romaniei.jpg" alt="Harta_Romaniei" style="width:100%">
<button class="btnarad"; onclick= "window.location.href='Arad.php'"; Target="split right">Arad</button>
<button class="btntimisoara">Timisoara</button>
</div>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>Information</h2>
// I want the information here!
</div>
</div>
</body>
It doesn't have much to do with PHP, you should really do it with HTML + JavaScript.
The window.href.location will always redirect you to another route, and will never do what you want.
You'll need something like this: Simple Load an HTML page from javascript based on window width
Iam trying to have 3 buttons, and when i press one, it will show the content of a php file. This is what i have done so far:
In the main Html file:
<div class="buttons">
<a class="showSingle" target="1">Logg</a>
<a class="showSingle" target="2">Saker</a>
<a class="showSingle" target="3">Rediger Kunde</a>
</div>
<div id="div1" class="targetDiv"><?php include 'php/loggselect.php'; ?></div>
<div id="div2" class="targetDiv">Saker</div>
<div id="div3" class="targetDiv">Rediger </div>
And later in the same file:
<script type="text/javascript">
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
</script>
Have two problems: When I reload the page, all 3 divs are showing, I have to press one of the "buttons" to only show the content of that spesific button.
The next and biggest problem is that this is working fine as long as it is plain text. But when I use <?php include 'php/loggselect.php'; ?> it will no longer show / hide. The php file should display a table with search result from my database. But it does not work when the php only contains `
echo 'testing';
?>` either. Any soulution?
Thanks!
Problem #1: You can do,
CSS: .hiddenDiv {display:none;}
And add this class to every div
$(function(){
$(".showSingle").eq(0).trigger("click");
});
Problem #2: Do
var _var1 = "variableone";
$("#div1").load('php/loggselect.php?v1='+_var1+'&v2='+_var1);
Don't do <?php ... ?>
When see more button is clicked, second passage shows but there is a gap in between them as per shown in the screenshot. I want the second passages to continue with first one
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');
<div class="group">
How are you?
<div class="moreinfo" style="display: none;">
Fine
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
How to get result from How are you?? Fine answer should be next to the question with no space.
I get now what you want for your project. You wanted a "Read more" function for your articles.
Using <div></div> to hide your continued text/string causes a new line. You can just replace it with <font></font>.
<!-- FIRST ARTICLE -->
<div class="group">
This is the first article that would
<font class="evenmore" style="display: none;">
show more information about this first article.
</font>
<div class="moreinfo">
See more
</div>
</div>
<!-- SECOND ARTICLE -->
<div class="group">
This is the second article that would
<font class="evenmore" style="display: none;">
show more information about this second article.
</font>
<div class="moreinfo">
See more
</div>
</div>
Then let us create a script that when "See more" is clicked, it will hide this "See more" and would show the content inside <font></font>.
$(document).ready(function(){
$(".moreinfo").click(function(){ /* WHEN SEE MORE IS CLICKED */
var elem = $(this);
$(this).fadeOut(200).hide(); /* HIDE THE CLICKED SEE MORE */
elem.closest("div.group").find('font.evenmore').fadeIn(200).show(); /* SHOW THE CONTENT OF THE CLOSEST FONT */
});
});
Here is a fiddle. But if you want to hide the shown details, we can add a "Show Less". Check this second fiddle.
I have in my webpage this html popup:
<div class="popup1" id="popup_calendar">
<div class="bg_popup"></div>
<div class="content_popup">
<div class="popup_content">
<h2>Content Detail</h2>
<div class="content_scroll scroll-pane">
<div class="clearfix">
<h3 class="left">Title...</h3>
</div>
<h4>Place: ...</h4>
<h4>Date: ...</h4>
<h4>Hour: ...</h4>
<h4>length: ...</h4>
...
...
...
Inscribirme
</div>
</div>
</div>
And I need to open it with a click but content depends on other data.
How can I open my popup (after load necessary data) and edit it so that I can show it correctly? (I need to fill place, date, hour, length, etc...)
Thank you very much in advance.
put .slideDown() in load() callback:
$('#popup_calendar').load(page, function ()
{
$('#popup_calendar').slideDown(1000);
}
Im trying to make a left side navigation that slides down with sub categories when you click on one of the links.
I've got it to work for the top link only but the others dont work.
In my header file I have some jquery script like this:
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
in my HTML/PHP i have this code:
<div id="left-prod-nav">
<ul>
<li class="top">Product Categories</li>
<?for($i = 0; $i < $count; $i++)
{?>
<div id="flip"><li><img src="images/arrowright_off.gif" style="padding:0px; margin:0px;float:right;"><?=$result[$i]['categoryName']?></li> </div>
<div id="panel">Hello world!</div>
<?}?>
</ul>
<div class="clear"> </div>
</div>
so the navigation is there...and when I click on the top one, the others slide down so you can see the sub categories for the one I clicked.
however if I click any of the others nothing happens.
has anyone had this problem before or know how to solve it looking at my code?
Thanks
I can assume you are trying to accomplish something like this: http://jsfiddle.net/QQRy8/
$(".flip").click(function(){
$(this).next(".panel").slideToggle("slow");
});
I changed your jQuery to use classes, you should change your PHP to give each div a class name instead of an ID (ID's must be unique!)
This answer is based off this HTML:
<div class="flip">
<li>
cool
</li>
</div>
<div class="panel" style="display: none;">Hello world!</div>