CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BrettKB
BrettKB

Reputation: 205

js Find Class Within Div + toggle CSS/Hide One Show Other

I have 2 divs and each div has a span. By default each span class is set to display: none. I am trying to display: inline the span within whichever div is clicked. If the span is already display: inline then I am trying to revert back to display: none. In other words,

How can I achieve this? I am currently stuck on selecting the correct div then I will move on to showing and hiding correctly.

Here is what I currently have:

<html>
        <div class="button">foo</div>
            <span class='inner'>hey</span>      <div class="button">bar</div>
            <span class='inner'>hey again</span> </html>

<style>
    .inner {
        display: none;
    }
    .button{
            display: inline-block;
            height:20px;
        width:70px;
        background-color:#000000;
        color:#ffffff;
        text-align:center;
    } </style>

<script>
    $(document).ready(function() {
      $('.button').click(function() {

        //first off, I am not able to find the span class='inner' within my div.button so this is not correct to find my .inner within $(this)
        //alert($(this).find('.inner').html());
        //alert($('.inner',this).html());

        //then should I do something like this(sorry for the bad syntax, I'm not sure exactly how to write it yet):
        //if $(this).('.inner').css('display', 'inline'); { //this span is visible
             $(this).('.inner').css('display', 'none');     //so hide this span
          else { //span is not visible
             $('.inner').hide(); //hide other span
             $(this).find('.inner').css('display', 'inline'); //show this span

      });
    }); </script>

Thank you

Upvotes: 2

Views: 1541

Answers (6)

Kisspa
Kisspa

Reputation: 584

Test you view this code

.button{
    display: inline-block;
    height:20px;
    width:70px;
    background-color:#000000;
    color:#ffffff;
    text-align:center;
    padding:20px;
   cursor:pointer;
}

http://jsfiddle.net/kisspa/24jTa/

Upvotes: 0

Sunny
Sunny

Reputation: 194

You can use jQuery accordian to fix this

All you need to do is import below mentioned lib file http://code.jquery.com/ui/1.10.4/jquery-ui.js

HTML

<div id="accordion">
    <div class="button">foo</div> <span>hey</span> 
    <div class="button">bar</div> <span>hey again</span>
</div>

JavaScript/jQuery

$(document).ready(function () {
    $("#accordion").accordion({
        collapsible: true,
        active: false
    });
})

Please check this demo to get a clear idea

Demo Here

Upvotes: 1

Mr7-itsurdeveloper
Mr7-itsurdeveloper

Reputation: 1631

working code below,please check commenting to understand coding 

<script>
    $(document).ready(function() { 
          $(".inner").hide(); //hide all spans

      $('.button:first').click(function() {//click on first div 
    var span1 = $('span:first').show();   // first span will show



      }); 
          $('.button:last').click(function() {//click on second div 
        var span1 = $('span:last').toggle();  
        var span2 = $('span:first').hide();  





      });
    }); </script>

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20636

Use this,

$(document).ready(function() {
    $('.button').click(function() {
        var next = $(this).next('.inner');
        next.toggle();
        $('.inner').not(next).hide();
    });
});

Demo Fiddle

Or CSS method,

$(document).ready(function() {
  $('.button').click(function() {
    var next = $(this).next('.inner');
    var cssState = (next.css('display') === 'none')?'inline':'none';
    next.css('display',cssState);
    $('.inner').not(next).css('display','none');
  });
});

Demo Fiddle

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this :

 $(document).ready(function() {
      $('.button').click(function() {
            $('.inner').hide(); // hide all inner span
            $(this).next('.inner').show(); // show next inner span 
      });
});

Here is the JSFiddle Demo

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try,

$('.button').click(function() {
 var inner =  $(this).next('.inner');
 var display = inner.css('display');
 inner.css('display',(display === 'none')?'inline':'none');
});

DEMO

Upvotes: 0

Related Questions