Raymond Raymond - 2 months ago 8
CSS Question

Using variables to show hidden div

This is the first time i'm working with variables but I can't seem to get this right.

What I want to achieve is to show a hidden webcam stream on click to appear.
So when pressed 'c1' camera 1 shows up and if webcam 2 was previously opened webcam2 is hidden.

I know how to achieve this without variables but i'm trying to learn more about jquery.

$(document).ready(function(){
var $c1 = $('.c1'),
cam1 = $('#cam1'),
$c2 = $('.c2'),
cam2 = $('#cam2');

$c1.click(function(){
cam1.fadeTogge(1000, function){
cam2.css('display: none');
});
});

$c2.click(function(){
cam2.fadeToggle(1000, function){
cam1.css('display: none');
});
});


});

<div class="area">
<div class="padWrapper">
<ul>
<li class="borderRadius"><a href="">RAYMOND</a></li>
<li class="borderRadius"><a href="">STORAGE</a></li>
<ul>
<li class="c1" style="border-radius: 20px 20px 0px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);">CAM1</li>
<li class="c2" style="border-radius: 0px 0px 20px 20px;">CAM2</li>
</ul>
</ul>
<div class="pad borderRadius">
</div>
</div>
<div class="dispWrapper">
<div class="display borderRadius">
<img id="cam1" src="http://192.168.0.102:9000/?action=stream"></img>
<img id="cam2" src="http://192.168.0.103:9000/?action=stream"></img>
</div>
</div>
</div>


thanks for the help in advance !

Answer

Try this :

$(document).ready(function() {
    
    $c1 = $('.c1');
    $c2 = $('.c2');
    $cam1 = $('#cam1');
    $cam2 = $('#cam2');
    
    $c1.on("click",function(){
        $cam1.fadeIn(500);
        $cam2.fadeOut(500);
    })
    
    $c2.on("click",function(){
        $cam2.fadeIn(500);
        $cam1.fadeOut(500);
    })

})
<div class="area">
    <div class="padWrapper">
        <ul>
            <li class="borderRadius"><a href="">RAYMOND</a></li>
            <li class="borderRadius"><a href="">STORAGE</a></li>
            
            <li class="c1" style="border-radius: 20px 20px 0px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);">CAM1</li>
            <li class="c2" style="border-radius: 0px 0px 20px 20px;">CAM2</li>
        </ul>
        
        <div class="pad borderRadius"></div>
        
        </div>
    <div class="dispWrapper">
        <div class="display borderRadius">
            <img id="cam1" src="http://192.168.0.102:9000/?action=stream" alt="image1">
            <img id="cam2" src="http://192.168.0.103:9000/?action=stream" alt="image2">
        </div>
    </div>
    
</div>     
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>