I want click on the check box and hide the respective content.
Now in my code all the content with same class gets hidden when I click any one of the checkbox.
Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.
Fiddle link for reference
$('input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
$('.div1').hide();
} else {
$('.div1').show();
}
});
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<form>
<input type="checkbox">Exam1
<div class="div1">I am content1!
</div>
<br>
<input type="checkbox">Exam2
<div class="div1">I am content2!
</div>
<br>
<input type="checkbox">Exam3
<div class="div1">I am content3!
</div>
<br>
<input type="checkbox">Exam4
<div class="div1">I am content4!
</div>
<br>
</form>
https://jsfiddle.net/6ybp2tL6/
Is this possible??
Thanks in advance
Try this instead DEMO
$('input[type="checkbox"]').click(function() {
($(this).is(":checked")) ? $(this).next().hide() : $(this).next().show();
});
Try to hide all the divs with class div1 initially,
$(".div1").hide();
$('input[type="checkbox"]').click(function() {
$(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
});
And toggle the visibility of the relevant div element with class div1 by using next() and toggle()
DEMO
Related
I want to show the div class of .unhideme on a button press. This class is dynamically generated so there are multiple divs with the same class name. Using JQuery how do I show this block correctly?
<div id="negativeButtons">
<div class="unhideme" name="unhideme" style="display:none">
<h3>Comments</h3>
<textarea name="unhappymanager" id="unhappymanager"></textarea>
</div>
<input type="submit" class="excused" name="negativexcused" value="Excused">
<input type="button" class="unexcused" name="unexcused" value="Unexcused">
<input type="submit" class="commentpushDB" name="commentpushDB" style="display:none" value="Submit">
</div>
Here I have jquery which works for the other buttons but I can't seem to find a function that will show the div.
$(document).ready(function() {
$(".unexcused").click(function() {
$(this).closest(".unhideme").show();
$(this).closest(".unexcused").hide();
$(this).prev(".excused").hide();
$(this).next(".commentpushDB").show();
});
});
Instead you have to use .siblings() method:
$(".unexcused").click(function() {
$(this).siblings(".unhideme").show();
$(this).siblings(".unexcused").hide(); // <---- ?? why hide the buttons.
$(this).prev(".excused").hide();
$(this).next(".commentpushDB").show();
});
It's because the buttons and the div are siblings not parents.
i want to select a value from my dropdown, and then, when i click a button, it hides certain div and show another div. I'm baffled on how to achieved this. so i have two div.
<div id="div1"> some content </div>
<div id="div2"> some content </div>
#Html.DropDownListFor(model => model.Reference, ViewBag.ISharedUI as SelectList, "-- REFERENCE TYPE -- SHOW ALL", new { #id = "testID" })
and here is my button.
<input type="submit" value="Filter" name="Command" class="btn btn-default" onclick="abc()" />
and this is my function. I try to do it,
function abc() {
if ('#testID' != 1) {
$('#div1').show();
$('#div2').hide();
} else if (testID != 2) {
$('#div1').show();
$('#div2').hide();
} else {
$('#div1').hide();
$('#div2').hide();
}
}
I hope my question is clear.
I am unsure with what you want to do with the value from the dropdown input, but it is not too relevant to affecting the state of the divs if you are only interacting with the button to affect the divs.
In terms just hiding the div, you can apply a class "hidden" that hides the element or not with CSS.
Then you can toggle the div and whether or not it appears by clicking on the button with jQuery by adding and removing that hidden class with the toggleClass.
Let me know if you have any more questions.
$(document).ready(function() {
$(".btn").on("click", function() {
$("#div1").toggleClass("hidden");
$("#div2").toggleClass("hidden");
})
})
.hidden {
display: none;
}
<div id="div1"> some content </div>
<div id="div2" class="hidden"> some content </div>
<input type="submit" value="Filter" name="Command" class="btn btn-default" onclick="abc()" />
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 am trying to change a div content box when a link above that box is clicked. I added a click function to the individual buttons then the corresponding dive containing the content for that particular box should be displayed.
When I apply the jQuery to the page, the content does not change according to the link that is clicked and the page displays awkwardly.
This is the jsfiddle I'm working with.
The webpage I'm working with is here.
Place where am i making the mistake.
The jQuery I'm working with so far looks like this
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
$('.question2').click(function(){
$('.new_member_box_display').load('#answer2');
})
$('.question3').click(function(){
$('.new_member_box_display').load('#answer3');
})
$('.question4').click(function(){
$('.new_member_box_display').load('#answer4');
})
});//end of ready
The HTML I'm working with looks like this :
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
</div>
<div class="clear" class="question"></div>
<div id="answer1">
1
</div>
<div id="answer2">
2
</div>
<div id="answer3">
3
</div>
<div id="answer4">
4
</div>
<div class="new_member_box_display" id="question">
Text will appear here when one of the tabs above is clicked
</div>
load() loads an external file with ajax, not elements on your page. You're probably just trying to hide and show elements :
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});
FIDDLE
Here's a fiddle that does what I think you're looking to do. There are cleaner ways to do it, but this should work.
http://jsfiddle.net/PZnSb/6/
Basically you want to set the inner html of one element to the inner html of another, like this:
$('.question1').click(function(){
$('.new_member_box_display').html($('#answer1').html());
})
instead of this:
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
It seems you just want the text to change when you click, try this.
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').text($('.answer1 ').text());
});
$('.question2').click(function(){
$('.new_member_box_display').text($('.answer2').text());
});
$('.question3').click(function(){
$('.new_member_box_display').text($('.answer3').text());
});
$('.question4').click(function(){
$('.new_member_box_display').text($('.answer4').text());
});
});
http://jsfiddle.net/cornelas/PZnSb/7/embedded/result/
I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span> element further down the page.
When <button id="people"> hasClass('user_view_active') the HTML link should display "People" when <button id="jobs"> hasClass('user_view_active') the HTML link should display "Jobs".
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view">Jobs</button>
<button id="people" class="user_view_active user_view">People</button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> People</span>
To replace the text within a link you can use the jQuery .text() function. This function can also get the text value and also set the text value - as is shown in the example below -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.
Okeydokey ?
Are you sure those are the right tags ?
<span class="right_title">Connection Suggestions</title>
Are you sure an <a> element inside a <button> element is a good idea?
<button id="jobs" class="user_view">Jobs</button>
role="main" is'nt a valid attribute, but will probably work anyway.
This just seems easier:
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
FIDDLE
Try this way:
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');