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

Question

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,

click div1 and span1 shows,
then click div2, span1 hides and span2 shows,
then click div2 again and span2 hides, span1 stays hidden.

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

Shaunak D · Accepted Answer · 2014-06-09 05:49:13Z

1

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

.next() - next <span> element.
.toggle() - show/hide based on current state.

edited Jun 9, 2014 at 5:49

answered Jun 9, 2014 at 5:38

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sunny · Accepted Answer · 2014-06-09 06:18:57Z

1

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

answered Jun 9, 2014 at 6:18

Sunny

1943 bronze badges

1 Comment

mohamedrias Over a year ago

It's not related to jquery-ui and also this doesn't solve the OP's problem

Rajaprabhu Aravindasamy · Accepted Answer · 2014-06-09 05:35:44Z

0

Try,

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

DEMO

answered Jun 9, 2014 at 5:35

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Comments

Bhushan Kawadkar · Accepted Answer · 2014-06-09 05:36:32Z

0

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

answered Jun 9, 2014 at 5:36

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

Mr7-itsurdeveloper · Accepted Answer · 2014-06-09 06:06:28Z

0

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>

edited Jun 9, 2014 at 6:06

answered Jun 9, 2014 at 5:49

Mr7-itsurdeveloper

1,6412 gold badges17 silver badges24 bronze badges

Comments

user229044 · Accepted Answer · 2014-06-10 03:32:19Z

0

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/

edited Jun 10, 2014 at 3:32

user229044♦

241k41 gold badges348 silver badges350 bronze badges

answered Jun 9, 2014 at 7:43

Kisspa

5844 silver badges11 bronze badges

1 Comment

user229044 Over a year ago

Stop writing "//" before all your sentences please, and stop indenting all of your text. You're marking everything as code when you do that.

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

1 Comment

DEMO

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related