Not sure if my title states clearly, sorry about that. Let's say I have 2 buttons, each with jQuery toggle() to show/hide its own content. It works like when I click Button 1, Paragraph 1 shows (I make it hidden on page load.) And so does Button 2 and Paragraph 2.
However, I really want to hide the current paragraph when clicking on the other buttons so that I can show only 1 paragraph at a time. For example, when I click Button 1 , Paragraph 1 shows. Then when click it again, the paragraph hides. But if I click the other button (says, Button 2), I want Paragraph 1 to hide while Paragraph 2 is showing. Is it possible to do so?
Please look at my pen here: Codepen
Thank you.
Try this:
$(document).ready(function(){
$("#p1").hide();
$("#p2").hide();
$("#btn1").click(function(){
$("#p1").toggle();
$("#p2").hide();
});
$("#btn2").click(function(){
$("#p2").toggle();
$("#p1").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>
Have modified your html and js to be little simpler. Here is how it is..
HTML
<button id="btn1" class="btn" data-toggle="#p1">Button 1</button>
<button id="btn2" class="btn" data-toggle="#p2">Button 2</button>
<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>
Add an attribute data-toggle to toggle particular paragraph and add its id as value for this attribute.
Add class to each button so that we can have only one event written for all the button.
JS
$(document).ready(function(){
$("#p1").hide();
$("#p2").hide();
//attaching event to .btn class
$(".btn").click(function(){
var targetElement=$(this).data('toggle'); //get its data-toggle value
$('p').hide();//hide all p tags
$(targetElement).show(); //show only targeted p tag
});
});
UPDATED PEN
If you want something extensible, you can use a data attribute to identify the paginated paragraphs.
$(function() {
var $pages = $("p");
$pages.hide();
$("button").click(function() {
$pages.hide();
$('#' + $(this).data("target")).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-target="p1">Button 1</button>
<button data-target="p2">Button 2</button>
<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>
yes it is possible to hide other paragraphs and show specific paragraphs. Change your jquery code to following :
$(document).ready(function(){
$("#p1").hide();
$("#p2").hide();
$("#btn1").click(function(){
$("#p2").hide();
$("#p1").toggle();
});
$("#btn2").click(function(){
$("#p1").hide();
$("#p2").toggle();
});
});
OR
you can even simplify the code by adding attribute to button tag :
HTML :
<button id="btn1" class="btn" data-ref="p1">Button 1</button>
<button id="btn2" class="btn" data-ref="p2">Button 2</button>
<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>
jQuery :
$(document).ready(function(){
$("p").hide();
$('button').click(function() {
var id = $(this).attr('data-ref');
$('p').hide();
$('body').find('#'+id).show();
});
});
Related
How do you change the name of text within a div that your selector is inside of? In other words, I'd like to click on a button and change the text of the text above the button (within the same div).
For example, in my html, there is a button and a title above it. Once the button is clicked, I'd like the title above it to change to the id of the button.
This problem is similar to this question, but I'm having difficulty changing the text within the div that the selector is in.
Below is my attempt to grab the id of the button, and change the text within the div container.
Javascript (my attempt) (codepen here):
$('.btn.btn-default').on('click', function() {
var desired_name = $(this).attr('id')
$('#title').find($(this)).html(desired_name);
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="title">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default" id="true_name1">NAME</button>
</div>
<div>
<p id="title">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default" id="true_name2">NAME</button>
</div>
Have you tried $(this).siblings("p")
This will select the <p> above the button
Have you tried jquery .prev()
https://api.jquery.com/prev/
$('.btn.btn-default').on('click', function() {
var desired_name = $(this).attr('id')
$(this).prev().html(desired_name);
});
You can use the jQuery method siblings() to select the <p> element inside your <div> container.
However I recommend using a class as a unique selector inside your container.
$('.btn.btn-default').on('click', function() {
$(this).siblings(".desired-name").text($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p class="desired-name">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default" id="true_name1">NAME</button>
</div>
<div>
<p class="desired-name">Temporary Button Title That Should be 'true_name1'</p>
<button class="btn btn-default" id="true_name2">NAME</button>
</div>
Change the ID's to classes for starters. Then target them like this:
$('.btn.btn-default').on('click', function() {
var desired_name = $(this).attr('id');
$(this).prev(".title").text(desired_name);
});
Hey hopefully this is an easy solution:
On click of the button I want to be able to copy only the text that is visible within the id="description". what am I doing wrong?
HTML:
<p id="description"> Test <span style="display:none">test2</span></p>
<button type="button" id="copy-description">Click Me!</button>
jQuery:
<script type="text/javascript" src="js/jquery.zclip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('p#description').text()
});
// The link with ID "copy-description" will copy
// the text of the paragraph with ID "description"
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
// The link with ID "copy-dynamic" will copy the current value
// of a dynamically changing input with the ID "dynamic"
});
</script>
It needs to be in a parent tag like a p tag and then call the span visible within that tag.
HTML:
<p id="description">
<span id=""> Test </span>
<span style="display:none; visibility:hidden;">test2</span>
</p>
jQuery:
$('#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('#description span:visible').text()
});
Please check out my HTML markup:
<button class="btn">Toggle</button>
<p class="para">This is a text</p>
<!-- when .btn[0] click then .para[0] will be display block but all other para[1],para[2],....,para[n] will be display none-->
<button class="btn">Toggle</button>
<p class="para">This is a text</p>
<!--- .btn[1] only works for .para[1]-->
<button class="btn">Toggle</button>
<p class="para">This is a text</p>
<!--- .btn[2] only works for .para[2]-->
When .btn[0] gets clicked then .para[0] should be display:block, but all other para[1], para[2] , ...., para[n] will be display:none.
How can I achieve this in JavaScript or JQuery (without adding unique id's)?
You can hide all the .para by default using css:
.para {
display: none
}
and using below code to show the expected paragraph as well as hiding other paragraphs
$('.btn').click(function() {
$('.para').hide();
$(this).next().show();
});
Fiddle Demo
try this
$(document).ready(function(){
$('.para').hide();
$('.btn').click(function() {
$('.para').hide();
$(this).next().show();
});
});
See FIDDLE
<html>
<head>
<title></title>
</head>
<body>
<button id="btn_id">CLICK THE BUTTON</button> RESULTS:
<div id="result"></div>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$("#btn_id").click(function () {
$("#result").append("<button type='button' id='btn_id2' class='close pull-right' aria- hidden='true'>×<\/button>" + "<pre class='one'>Sample text<\/pre>");
$("#btn_id").click(function () {
$("#btn_id").remove();
$(".one").empty();
});
});
</script>
</body>
</html>
I'm having a problem on the above code. I'm trying to append text with a button on it. The button will be the one to trigger to remove the appended text. But what happening is I can't remove the appended text one by one. The first appended text with the button has only the capability to remove all the appended text. But what I wanted to happen is that, it should be one at a time even though that I clicked the "CLICK THE BUTTON" a number of times.
What I needed is the "CLICK THE BUTTON" to be clicked a number of times and it will produced an appended text with a close button on it. The close button will be the one to remove the appended text, only for that specific text.
Are you looking for something like this?
jsfiddle
JavaScript:
$("#btn_id").on('click', function(){
$("#result").append("<div><button type='button' id='btn_id' class='close pull-right' aria-hidden='true'>×</button>"+"<pre>Sample text</pre></div>");
});
$(document).on('click', 'button.close', function(){
$(this).parent().remove();
});
HTML:
<button id="btn_id">CLICK THE BUTTON</button>
RESULTS: <div id="result"></div>
Now am using fade in fadeout to toggle the content on button click.
the script i used for the same is
function showHide(divId){
if (document.getElementById(divID).style.display == "none") {
$('#'+divID).fadeIn(3000);
} else {
$('#'+divID).fadeOut(3000);
}
}
how to modify the above code to show content on button click.
consider i have 2 buttons
<button> button1</button>
<button> button2</button>
<div id="div1"> content of button 1 </div>
<div id="div2" style="display:hidden"> content of button 2</div>
i wanna show either of the div, when button1 is clicked, button 2 content shouldn't be visible and vice verse.
Update showHide
function showHide(divID) {
$("div").not("#" + divID).fadeOut(3000);
Choosing to fade them out every time is fine since hiding a div would not show another. You should probably also give all of these divs a class and use that instead of just "div"
You can use the onclick event on button.
<button id="button1" onclick="ShowHideDiv(this);">button1</button>
<button id="button2" onclick="ShowHideDiv(this);">button2</button>
<div id="div1"> content of button 1 </div>
<div id="div2" style="display:hidden"> content of button 2</div>
In the script tag, this function can be used.
function ShowHide(element)
{
if ($(element).attr("id") == "button1")
{
$("#div1").fadeIn(3000);
$("#div2").fadeOut(3000);
}
else if ($(element).attr("id") == "button2")
{
$("#div2").fadeIn(3000);
$("#div1").fadeOut(3000);
}
}
If you want to hide all the divs except one, you can use code similar to the following:
$("div").fadeOut(3000);
This will hide all the divs.
Then this will show the proper div:
$("#divId").fadeIn(3000);
Use proper Id of div in divId
I'm a beginner at js, but try this:
HTML:
<button id="btn1"> button1</button>
<button id="btn2"> button2</button>
<div id="div1"> content of button 1 </div>
<div id="div2" class="hidden"> content of button 2</div>
CSS:
.hidden { display: none;}
JS:
$('#btn1').click(function(){
$('#div2').addClass('hidden');
$('#div1').removeClass('hidden');
})
$('#btn2').click(function(){
$('#div1').addClass('hidden');
$('#div2').removeClass('hidden');
})
Here's a demo.
Please change your HTML into this :
<button id="btn1" onclick="ShowHideDiv(this);"> button1</button>
<button id="btn2" onclick="ShowHideDiv(this);"> button</button>
<div id="div1" class='divShowHide'> content of button 1 </div>
<div id="div2" class='divShowHide'> content of button 2</div>
now try this code :
firstCall this function on domready:
$(document).on('click',function(){
$('.divShowHide').fadeOut(30);
});
function ShowHideDiv(divId){
$('.divShowHide').fadeOut(3000);
$(divId).fadeIn(3000);
}