JQuery Archives -

Hide And Show Answer Based On Question Click

November 22, 2017January 6, 2018 / JQuery / by sandeepsoni / 1 Comment

I have questions and answers, the answers showing when a question has clicked the answer with hiding/show.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

$('#showanswer').click(function(){   
     $('.Question, p').show();
     $('#showanswer').hide();
     
     $('#hideanswer').show();         
  });
  
  $('#hideanswer').click(function(){
   
     $('.Question, p',).hide();
     $('#showanswer').show();
     $('#hideanswer').hide();         
  });  
  }); 
  </script>
  
  <style>
  .Question p{  
    background: #F39814; color: white;
    margin: 3px;
    padding: 0.4em;    
  }  
  </style>  
</head>
<body>
<strong>Hide And Show Answer Based On Question Click - Using Jquery</strong>
<br/>
<br/>
<input type="button" value="Show Answer" id="showanswer" />
<input type="button" value="Hide Answer" id="hideanswer"style="display:none;position:fixed"/>
<br>
<br>
<div id="dialog" title="Basic dialog" class="Question" >
<p style="display:none" class="answer" >jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.</p>
</div>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$('#showanswer').click(function(){

$('.Question, p').show();

$('#showanswer').hide();

$('#hideanswer').show();

});

$('#hideanswer').click(function(){

$('.Question, p',).hide();

$('#showanswer').show();

$('#hideanswer').hide();

});

</script>

<style>

.Question p{

background: #F39814; color: white;

margin: 3px;

padding: 0.4em;

}

</style>

</head>

<body>

<strong>Hide And Show Answer Based On Question Click - Using Jquery</strong>

<br/>

<br>

<p style="display:none" class="answer" >jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.</p>

</div>

</body>

</html>

Hide And Show Answer Based On Question Click

Please follow and like us:

0

JQuery Tasks

November 9, 2017January 6, 2018 / JQuery / by sandeepsoni / Leave a comment

Day: 1
1. working on Selectors in JQuery
How to show another div using button onclick?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
    
  $("#button").click(function(){
  
  $(".show").show();
   
  }); 
  
  });  
    
</script>
</head>
<body>

<input id="button" type="button" value="read more">

<div class="show" style="display:none">hi, I am here </div>

</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#button").click(function(){

$(".show").show();

});

</script>

</head>

<body>

</body>

</html>

Continue reading “JQuery Tasks” →

Please follow and like us:

0

JQuery Introduction

November 10, 2016November 10, 2017 / JQuery / by sandeepsoni / Leave a comment

JQuery Introduction:

JQuery is an easy to learn JavaScript library which makes JavaScript programming very easy.
JQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish and wraps them into methods that you can call with a single line of code.
JQuery also simplifies complicated tasks like AJAX calls and DOM manipulation.
jQuery will run exactly the same and produce same output in all major browsers
jQuery is free and very easy to include in your projects: just download its latest version from the jQuery website, or use an online Content Delivery Network
JQuery is continuously upgraded, maintained and documented by a dedicated community of great developers. This ensures high quality and support on the internet.

Continue reading “JQuery Introduction” →

Please follow and like us:

0