In blade.php file in Laravel I create a class name flip, when I click on it a class named panel is showed. Here $post_list contains some data which is collected from database table in previous controller. Using #for I can create many flip and slide class, but problem is when I click any of the flip class all slide class is showed. How can I click on one flip class and show the respective slide class?
Here is code for creating flip and panel class
#foreach($post_list as $post_list)
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">
<ul>
<li>
<input type="checkbox" name="selected[]">
<label>
<img src="{{ URL::asset($post_list-->image)}}" />
<p>{{$post_list->id->name}}</p>
</label>
</li>
</ul>
</div>
#endforeach
And here is my javascript code -
<script>
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
You are toggling all .panel divs. You need to take only the required .panel in context.
<script>
$(document).ready(function(){
$(".flip").click(function(){
$(this).next('.panel').slideToggle("slow");
});
});
</script>
<script>
$(".flip").click(function(){
$(this).closest(".panel").slideDown(500, function(){
// do additional stuff here..
});
});
</script>
Try this
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('click','.flip',function(){
$(this).next('.panel').slideToggle("slow");
});
</script>
Related
I am trying to show hide div blocks depending on the link on which it click. By default all div will hide. All helps are appreciated.
HTML Code -
<div class="singleFlights">
<div class="itinerarySummary">
<div class="itineraryMenu">
<ul class="list-inline">
<li>Flight itinerary</li>
<li>Fare rules</li>
<li>Baggage Information</li>
</ul>
</div>
<div class="itineraryPanel">
<div id="flight-itinery" class="itineraryPanelItem">
<!-- Content Here -->
</div>
<div id="fare-rules" class="itineraryPanelItem">
<!-- Content Here -->
</div>
<div id="baggage-info" class="itineraryPanelItem">
<!-- Content Here -->
</div>
</div>
</div>
</div>
<div class="singleFlights">
.....................
.....................
</div>
Requirements -
By default 'itineraryPanel' div hide.
If user click on 'Flight itinerary' link under 'itineraryMenu' the div 'itineraryPanel' will show (slide down)with 'itineraryPanelItem' item div. Others div '#fare-rules' and '#baggage-info' will hide. Same will be happen when click on Fare rules and Baggage Information also.
I try with -
$(document).ready(function(){
if($('.flightListing').length > 0){
$('.singleFlights').each(function(){
$('.itineraryMenu ul.list-inline li a').click(function(){
});
});
}
});
I am using bootstrap3. Note that I dont want to show 'itineraryPanel' div until user not click of any link. and after click 2nd time on same link open div slide up and hide.
Here is the live code after included of Vincent G codes - http://45.114.142.104/design//test/cloud/flight-listing-1-n.html
Here's a way to do it with jQuery and data-href elements
See this fiddle
$(function(){
$(".list-inline a").click(function(){
hrefId = $(this).data('href');
$('.itineraryPanelItem').slideUp();
if($(hrefId).is(':visible')){
$(hrefId).slideUp();
}else{
$('.itineraryPanel').show();
$(hrefId).slideDown();
}
});
});
EDIT
With multiples content, you have to use class instead of id
See this updated fiddle
$(function(){
$(".list-inline a").click(function(){
hrefClass = $(this).data('href');
$(this).parents('.singleFlights').find('.itineraryPanelItem').slideUp();
if($(this).parents('.singleFlights').find($(hrefClass)).is(':visible')){
$(this).parents('.singleFlights').find(hrefClass).slideUp();
}else{
$(this).parents('.singleFlights').find('.itineraryPanel').show();
$(this).parents('.singleFlights').find(hrefClass).slideDown();
}
});
});
I have three links on top, Logos (#logos), Business cards (#businesscards), Flyers (#flyers)
By default, "Logos" link is highlighted with content (#logos-container) showing.
When clicking "Business cards", Business cards content (#businesscards-container) will show with other content hidden.
When clicking "Flyers", Flyers (#flyers-container) content will show with others hidden.
This is my code:
[Javascript]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#businesscards-container").hide();
$("#flyers-container").hide();
$("#logos").click(function () {
$("#businesscards-container").hide();
$("#flyers-container").hide();
$("#logos-container").show();
});
$("#businesscards").click(function () {
$("#logos-container").hide();
$("#flyers-container").hide();
$("#businesscards-container").show();
});
$("#flyers").click(function () {
$("#logos-container").hide();
$("#businesscards-container").hide();
$("#flyers-container").show();
});
});
</script>
[html]
<div id="front-nav">
<ul>
<li id="#logos">Logos</li>
<li id="#businesscards">Business cards</li>
<li id="#flyers" style="padding-right:60px; border-right:none;">Flyers</li>
</ul>
</div>
<div id="logos-container">
</div>
<div id="businesscards-container">
</div>
<div id="flyers-container">
</div>
The default is working, but not when I click on other links. I tried adding e.preventDefault but no results. How should I go about this?
Thanks for any help.
EDIT: Resolved! Thank you.
Here is the fixed solution - JSFiddle
#flyers-container {
display: none;
}
#businesscards-container {
display: none;
}
Initially just add display none to divs you wanna hide.. and waa laaa
you should set the default display on the php page for all the containers. I assume logos is the default display.
<div id="logos" style="display:block;">
<!-- some code -->
</div>
<div id="businesscards" style="display:none;">
<!-- some code -->
</div>
<div id="flyers" style="display:none;">
<!-- some code -->
</div>
then the JavaScript will handle the show and hide of the elements
As you have mentioned that they are links, you need to prevent default behaviour,try do try this:
$("#logos").click(function (e) {
e.preventDefault();
$("#businesscards-container").hide();
$("#flyers-container").hide();
$("#logos-container").show();
});
$("#businesscards").click(function (e) {
e.preventDefault();
$("#logos-container").hide();
$("#flyers-container").hide();
$("#businesscards-container").show();
});
$("#flyers").click(function (e) {
e.preventDefault();
$("#logos-container").hide();
$("#businesscards-container").hide();
$("#flyers-container").show();
});
I have a series of divs with links and hidden divs. When the link is clicked, I need the hidden div within the parent to be shown. For example:
<div class="track" id="track1">
Song Notes
<div class="song-notes"></div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
<div class="track" id="track2">
Song Notes
<div class="song-notes"></div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
So far, the option that I tried opened up ALL of the .song-notes divs, but I want to specify that it's only the child divs of the parent div where the link is contained that should be opened.
I like using .toggle() here.
$('a.notes-link').click(function (){
$(this).next('.song-notes').toggle();
});
jsFiddle example
try this
$(document).ready(function(){
$('.notes-link').click(function(ev){
ev.preventDefault();
$(this).closest('.track').find('.song-notes').show();
});
});
DEMO
You can do this:
$(function () {
$('.notes-link').click(function (e) {
e.preventDefault();
$(this).next().show();
});
});
Demo
$(function () {
$('div.track a.notes-link').click(function (e) {
e.preventDefault();
$(this).next().show(); //$(this).next().toggle();--> to show hide
});
});
.next()
.toggle()
Add id to the hidden divs
<div class="track" id="track1">
Song Notes
<div class="song-notes" style="display:none" id="song1">1</div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
<div class="track" id="track2">
Song Notes
<div class="song-notes" style="display:none" id="song2">2</div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
Javascript Code:
function showNotes(id){
$('#song'+id).toggle();
}
Demo:
http://jsfiddle.net/Zz65U/
I'm using wordpress and in my loop I have a link that is clickable to toggle a div to show and hide the content, since this is within the loop it uses the same class for each item in the loop so when I toggle one link it shows the content for all.
<div class="additional-info">Additinal Information</div>
<div class="additional-info-box">
<?php echo $additional_info; ?>
</div>
<script type="text/javascript">
$(document).ready(
function(){
$(".additional-info").click(function () {
$(".additional-info-box").toggle();
});
})
</script>
So the additional-info class and the additional-info-box gets generated for each post, but when I click on any of the additional-info divs every additional info box gets shown.
Try wrapped :
<div class="additional-info">
Additinal Information
<div class="additional-info-box">
<?php echo $additional_info; ?>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function(){
$(".additional-info").click(function () {
$(this).find(".additional-info-box").toggle();
});
})
</script>
with that only the .additional-info clicked will show their content.
Live Demo
I'm new to jQuery and try to show a div when the user is clicking on a button. The button is below the text and is suppose to move up and down.
I tried a couple of things but couldn't work it out.
This is my code:
HTML
<div class="travel_infobox">
</div>
<div class="clearfix"></div>
<div class="travel_info_button">
InfoBox
</div>
jQuery
<script>
$(document).ready(function(){
$("input.show").click(function(){
$(".travel_infobox").show("blind");
});
});
$(document).ready(function(){
$("input.hide").click(function(){
$(".travel_infobox").hide(blind);
});
});
</script>
You have to use $(document)ready(function() {}); just one time, it is needed to let jQuery know when the page is fully loaded to run your code.
Then, that input.show I suppose there is an input button with show class somewhere, otherwise it doesn't work.
<script>
$(document).ready(function(){
$("input.show").click(function(){
$(".travel_infobox").show("blind");
});
$("input.hide").click(function(){
$(".travel_infobox").hide("blind");
});
});
</script>
Try this. Where is your show and hide button? So I have added one.
<div class="travel_infobox">
Trave info
</div>
<div class="clearfix"></div>
<div id="travel_info_button">
InfoBox
</div>
<button id='show'>show</button>
<button id='hide'>hide</button>
<script>
$(document).ready(function(){
$("#show").click(function(){
$(".travel_infobox").show("blind");
});
});
$(document).ready(function(){
$("#hide").click(function(){
$(".travel_infobox").hide("blind");
});
});
</script>