Jquery CSS Counter

Question

I'm trying to make a function that will target multiple divs, one at a time depending on a variable. So if they click the button once it will show the tip with ID of #tip1, if they click it again, it will show #tip2 etc.

        <script>
        var tipCount = 0;
        $('.subtitle').click({
            function () ({
                $('#tip'+tipCount++).toggleClass('visible');
            });
        });         
        </script>

I've been google for well over an hour and just can't get it it to work!

post your complete code. the given should have worked

Rab Khan
– Rab Khan

2013-01-30 07:08:34 +00:00
Commented Jan 30, 2013 at 7:08 — Rab Khan
– Rab Khan, Commented Jan 30, 2013 at 7:08
How could the given work? That's not proper syntax.

Ohgodwhy
– Ohgodwhy

2013-01-30 07:09:24 +00:00
Commented Jan 30, 2013 at 7:09 — Ohgodwhy
– Ohgodwhy, Commented Jan 30, 2013 at 7:09

Talha Akbar · Accepted Answer · 2013-01-30 07:10:23Z

1

    var tipCount = 0;
    $('.subtitle').click(
        function () {
            $('#tip'+tipCount).hide();
            $('#tip'+(tipCount++)).show();
        });

answered Jan 30, 2013 at 7:10

Talha Akbar

10.1k7 gold badges41 silver badges62 bronze badges

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

Comments

Ohgodwhy · Accepted Answer · 2013-01-30 07:10:32Z

0

var tipCount = 0;
$('.subtitle').click(function(){
    $('#tip'+tipCount++).toggleClass('visible');
});

Given your syntax, probably got an error on (

answered Jan 30, 2013 at 7:10

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

Comments

Billy Moon · Accepted Answer · 2013-01-30 07:19:44Z

0

The main issue is the incorrect format of the javascript. Here is a working proof of method.

html

<h2 class="subtitle">Subtitle</h2>

<div id="tip1">This is tip 1</div>
<div id="tip2">This is tip 2</div>
<div id="tip3">This is tip 3</div>
<div id="tip4">This is tip 4</div>
<div id="tip5">This is tip 5</div>

css

.hidden{
    display: none;
}

javascript

var tipCount = 0;
$('.subtitle').click(function(){
    $('#tip'+tipCount++).toggleClass('hidden');
});

Demo: http://jsfiddle.net/7sgRu/

answered Jan 30, 2013 at 7:19

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

Comments

MadCom · Accepted Answer · 2013-01-30 07:38:03Z

0

HTML

<button>bum</button
<div class="hidden" id="tip1">This is tip 1</div>
<div class="hidden" id="tip2">This is tip 2</div>
<div class="hidden" id="tip3">This is tip 3</div>
<div class="hidden" id="tip4">This is tip 4</div>
<div class="hidden" id="tip5">This is tip 5</div>

CSS

.hidden{
    display: none;
}

JavaScript

var tipCount = 1;
$('button').click(function(){
    if(tipCount==6){
        $('#tip5').addClass('hidden');
        tipCount=1;
    }    
    $('#tip'+tipCount).removeClass('hidden');
    tipCount--;
    $('#tip'+tipCount++).addClass('hidden');
    tipCount++;
});

Demo: http://jsfiddle.net/7sgRu/4/

answered Jan 30, 2013 at 7:38

MadCom

2412 silver badges8 bronze badges

Collectives™ on Stack Overflow

Jquery CSS Counter

4 Answers 4

Comments

Comments

html

css

javascript

Demo: http://jsfiddle.net/7sgRu/

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

html

css

javascript

Demo: http://jsfiddle.net/7sgRu/

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related