please help

Discussion in 'JavaScript' started by paffdevel, Feb 25, 2016.

0
  1. #1
    hello,
    please help with the code - https://jsfiddle.net/kd2p1zsa/1/
    thanks
     
    paffdevel, Feb 25, 2016 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,821
    Likes Received:
    4,539
    Best Answers:
    123
    Trophy Points:
    665
    #2
    Try this in the javascript panel
    
 var oldClass;

 $('input[name="o1"]').on('click', function() {

   $(oldClass).fadeOut('slow');
   var newClass = '.'+$(this).val();
   $(newClass).fadeIn('slow');

   oldClass = newClass;
 });
    Code (markup):
     
    sarahk, Feb 25, 2016 IP
  3. denis bayly

    denis bayly Well-Known Member

    Messages:
    110
    Likes Received:
    29
    Best Answers:
    6
    Trophy Points:
    105
    #3
    Hi there paffdevel,

    if you are at all interested, this can easily be done with CSS..

    

<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<style media="screen">
#holder {
    position:relative;
 }
.sell,.buy,.transport{
    position:absolute;
    z-index:0;
    opacity:0;
    background-color:#fff;
    transition:all 1.5s ease-in-out;
 }
#sell:checked~#holder .sell,
#buy:checked~#holder .buy,
#transport:checked~#holder .transport {
   z-index:3;
   opacity:1;
 }
</style>

</head>
<body> 

<input type="radio" name="o1" id="sell" value="sell">
<label for="sell">test</label>

<input type="radio" name="o1" id="buy" value="buy">
<label for="buy">test</label>

<input type="radio" name="o1" id="transport" value="transport">
<label for="transport">test</label>

<div id="holder">
 <div class="sell">1</div>
 <div class="buy">2</div>
 <div class="transport">3</div>
</div>

</body>
</html>
    Code (markup):

    coothead
     
    denis bayly, Feb 25, 2016 IP