I trying to change the content of my webpage using query. I have the following code, like this:
<div class="container" id="index">
<div class="table-responsive container selecoes" >
<table class="table">
<tbody id="selecaoList">
<td>
Brasil
</td>
</tbody>
</table>
</div>
<div class="container" id="selecoes">
<p>show something</p>
<div>
...
<script>
$(document).ready(function(){
$( "#selecoes" ).hide();
$("#selecoes a").click(function() {
$( "#index" ).hide();
$("#selecoes").show();
});
});
</script>
When I open the page, the first div is shown and it´s fine but when I click in Brasil, don't replace(hide) the <div id ="index"> to <div id="selecoes"> to show the element <p>.
So I want to hide the first div and show the second div in place of the first one.
Step 1: Set right selector on click function
Step 2: Close div tag of #index
Here is working code:
<div class="container" id="index">
<div class="table-responsive container selecoes" >
<table class="table">
<tbody id="selecaoList">
<td>
Brasil
</td>
</tbody>
</table>
</div>
</div>
<div class="container" id="selecoes">
<p>show something</p>
<div>
<script>
$(document).ready(function(){
$( "#selecoes" ).hide();
$("#selecaoList a").click(function() {
$( "#index" ).hide();
$("#selecoes").show();
});
});
</script>
Your selector for the click event is wrong. Must be:
$("#selecaoList a").click(function() ...
The click function is on wrong selector. Use this code:
$("#selecaoList a").click(function () {
$("#index").hide();
$("#selecoes").show();
});
Related
See Here i create my css file for show paragraph
<div>About</div>
<div>Photos</div>
<div>Rates and Reviews</div>
</div>
<!-- middel -->
<div class="col-lg-6" align="center" style="background-color:#CFF">
<div id="about" >about </div>
<div id="photos" >photos</div>
<div id="rates" >Rates and Reviews</div>
</div>
see here, describe jquery code. please help in implements
<script type="text/javascript">
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
});
toggle() function is what you need to show or hide specific element.
.toggleClass only add or remove specific class but it will not work for adding hidden and show class at same time
Replace $(target).toggleClass('hidden show'); with $(target).toggle();
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$('#mainDiv').find('a').removeClass("active");
$(this).addClass('active');
$("#detailsDiv").children().hide();
$(target).toggle();
});
});
.active{
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv"><div>About</div>
<div>Photos</div>
<div>Rates and Reviews</div>
</div>
<!-- middel -->
<div class="col-lg-6" id="detailsDiv" align="center" style="background-color:#CFF">
<div id="about" >about </div>
<div id="photos" style="display: none;">photos</div>
<div id="rates" style="display: none;">Rates and Reviews</div>
</div>
I have a table structured like that:
<table id="example">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>some php to get custom field</td>
<td>also custom field- the loop is above so this is working as it should</td>
<td>
<a href="#" class="showhide">
<div class="more">
.. the content I want to show when user clicks a class="showhide"
</div>
</a>
</td>
<tr>
</tbody>
</table>
I tried to implement with jQuery, but nothing happens. This is the jQuery I tried:
$(function () {
$('.showhide').click(function () {
$(this).next().toggle()
});
});
I also make it with document.ready and still not working. Is there any other way to do that?
All I want is that the content of the div class="more" is to be shown under the row in the table (and in front of the next one), of course when the a class="showhide" is clicked.
I am using this together with plugin DataTables, but this is not causing problems.
The class you have is showmore not showhide
Live Demo
$(function() {
$('.showmore').click(function(){
$(this).next().toggle()
});
});
Edit based on OP comments: I have shorten the html to make it simple and took div out of a tag.
Live Demo
Html
<table id="example">
<tbody>
<tr>
<td> Show / Hide
<div class="more">.. the content I want to show when user clicks a class="showmore"</div>
</td>
</tr>
</tbody>
</table>
Javascript
$(function () {
$('.showhide').click(function () {
$(this).next().toggle()
});
});
Either change this in the markup:
class="showmore">
to this:
class="showhide">
or do this:
$('.showmore').click(function (e) {
e.preventDefault();
$(this).next().toggle()
});
Note:
This is invalid html:
<a href="#" class="showhide">
<div class="more">
.. the content I want to show when user clicks a class="showhide"
</div>
change to this:
show more
<div class="more">
.. the content I want to show when user clicks a class="showhide"
</div>
or you can try this one with .children() not with .next():
$('.showmore').click(function (e) {
e.preventDefault();
$(this).children('more').toggle();
});
TRYOUT IN FIDDLE HERE
$(document).on('click','.showmore',function(){
//your code..
})
i writing simple script to popup quick info using jquery. When user click view, some info will show using toggle() and hide when user click again. And this script will loop 10 times.
But the problem is i want this popup only show one time and the rest will hide, now when user click view 1 and view 2 all popup will show at same time.
You can check my jsFiddle click here
<script>
$(document).ready(function() {
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_1").toggle();
});
$(document).click(function() {
var $el = $(".box_1");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
});
</script>
*im not sure how to combine this script in one function
Here is your working demo
$("a").click(function() {
$('.contact_box').hide();
$(this).next('div').show();
});
use hide() to hide your corresponding box..
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_2").hide(); <-----here
$(".box_1").toggle();
});
$("#view_2").click(function(e) {
e.stopPropagation();
$(".box_1").hide();<-----here
$(".box_2").toggle();
});
fiddle here
should be :
before $(".box_1").toggle(); this hide $(".box_2").hide(); and before $(".box_2").toggle(); this hide $(".box_1").hide();
This will works.
Hi Use the code below,
<script>
$(document).ready(function() {
$("#view_1").click(function(e) {
e.stopPropagation();
$(".box_1").toggle();
var $el = $(".box_2");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
$(document).click(function() {
var $el = $(".box_1");
if ($el.is(":visible")) {
$el.fadeOut(200);
}
});
});
</script>
Hope this solves your problem
Toggle also has callback function you can use it.
$(".box_1").toggle('slow', function() {
// show hide code or fadeIn fadeOut or other animation
$(".box_2").fadeOut('fast');
});
Try this:
<div style="position:relative">
<a style="cursor: pointer" id="view_1" class="my_view">View 1</a>
<div class="contact_box box_1 content_box" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV A</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson Button</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-66558741</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: jb#gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
<br>
<br>
<div style="position:relative">
<a style="cursor: pointer" id="view_2" class="my_view">View 2</a>
<div class="contact_box box_2 content_box" style="display: none;">
<div class="left" style="width:150px; margin-right:10px;">
<img src="http://www.dunking-devils.com/images/samsung-logo_100x100.jpg"
style="max-width:150px" />
</div>
<div class="contact_info left" style="width:250px">
<div class="company_name">DIV B</div>
<table width="100%" border="0" class="table_contact">
<tr>
<td width="29">Name</td>
<td>: Jenson</td>
</tr>
<tr>
<td style="padding-right:0px">Phone</td>
<td>: 012-88542215</td>
</tr>
<tr>
<td style="padding-right:0px">Email</td>
<td>: ac#gmail.com</td>
</tr>
</table>
</div>
</div>
</div>
$(document).ready(function() {
$('.my_view').click(function(e) {
$('.my_view').siblings('div').each(function(){$(this).hide()});
$(this).siblings('div').toggle();
e.stopPropagation();
});
$(document).click(function() {
$('.my_view').siblings('div').fadeOut(200);
});
});
I have a few divs set up like so:
<div class="menu_options">
<div class="parent_div">input field</div>
<div class="children_div">
<div class='something">field</div>
<div class="something_else">field</div>
</div>
</div>
<div class="menu_options">
<div class="parent_div">input field</div>
<div class="children_div">
<div class='something">field</div>
<div class="something_else">field</div>
</div>
</div>
<div class="menu_options">
<div class="parent_div">input field</div>
<div class="children_div">
<div class='something">field</div>
<div class="something_else">field</div>
</div>
</div>
in jquery i am doing
$('.parent_options').each(function() {
$(this).click(function() {
});
});
right now $(this) is giving me the parent_div that i clicked on and I need to be able to move down to the children_div and hide the entire children_div. Any ideas. I know in prototype i used a down function but not sure if jquery has it.
If you want to hide .children_div after clicking on .parent_div use
$('.parent_div').click(function() {
$(this).siblings(".children_div").hide();
});
Demo here
$('.parent_div').each(function() {
$(this).click(function() {
$(this).next().hide();
});
});
If you're binding the function to all .menu-options, there's no need for each(). This should work if I understood your query properly:
$('.parent_div').click(function() {
$(this).siblings('.children_div').hide();
});
try .next()
$( this ).next( ".tb-contents'" ).show();
This will work.
Thanks
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
jQuery(".link").click(function()
{
jQuery("div.content").slideToggle(500);
});;
});
</script>
How to expand only the div which is linked to the specific link?
Edit:
Its done like this
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
<div class="content">
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
</div>
EDIT 2:
You changed your HTML. Now do this:
jQuery(this).closest('div.comment').next('div.content').slideToggle(500);
But wait! Now you have 2 different div.link elements in different relation to .content elements. Is this your actual HTML markup?
You could also do this:
jQuery(this).closest('div.content').slideToggle(500);
Please provide your actual HTML.
EDIT:
Based on updated question, do this:
jQuery(this).parents('div.blaat1').eq(1).next().slideToggle(500);
How to expand only the div which is linked to the specific link?
How are they linked?
If the div is a descendant, do this:
jQuery(this).find('div.content').slideToggle(500);
If the div is a an ancestor, do this:
jQuery(this).closest('div.content').slideToggle(500);
If the div is the next sibling, do this:
jQuery(this).next().slideToggle(500);
If the div is the previous sibling, do this:
jQuery(this).prev().slideToggle(500);
Without seeing your HTML structure, we can only guess at the solution.
For this HTML:
<div class="blaat1">
<div class="blaat1">
<a class="link">#</a>
</div>
<div class="blaat2">
<a class="link">#</a>
</div
</div>
<div class="content">
<div class="otherdivs">
<div class="blaat1_div"><p>Hi – I'm blaat 1</p></div>
<div class="blaat2_div"><p>Hi – I'm blaat 2</p></div>
</div>
</div>
Use this JS:
<script type="text/javascript">
$(document).ready(function() {
$(".content").hide();
$(".link").click(function() {
var blaat = $(this).parent().attr("class");
$(blaat+"_div").slideToggle(500);
});;
});
</script>
I haven't tested that, but it should work.
Try this:
$(".link").click(function(){
$(this).parents('div.content').slideToggle(500);
});;