CODEWITHSUNDEEP
jqueryregexcss
Hariharan
Hariharan

Reputation: 3263

Regular expression on CSS

My full code is posted here Apply Range for Class and ID in CSS

My JSfiddle - http://jsfiddle.net/9Tpzp/

My existing CSS code is like below 

#tab1:target ~ .tabs .tab1 dd div {
   height: 28px;
}
#tab2:target ~ .tabs .tab2 dd div {
   height: 28px;
}
#tab3:target ~ .tabs .tab3 dd div {
   height: 28px;
}
#tab4:target ~ .tabs .tab4 dd div {
   height: 28px;
}

I changed as below

[id*='tab']:target ~ .tabs [class*='tab'] dd div {
    height : 28px;
}

HTML:

<body>
        <div class="container">

            <div class="accordion">
                <span id="tab1"></span>
                <span id="tab2"></span>
                <div class="tabs">
                    <dl class="tab1">
                        <dd>
                            <a href="#tab1">Tab #1</a>
                            <div><p>Tab1</p></div>
                        </dd>
                    </dl>
                    <dl class="tab2">
                        <dd>
                            <a href="#tab2">Tab #2</a>
                            <div>
                                <p>
                                   Tab2
                                </p>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>

        </div>
    </body>

Now how can i specify the number range 1-4 in that regular expression.

If it is impossible in CSS, Can we achieve through any other way like jquery,etc,.

Upvotes: 0

Views: 108

Answers (1)

Hariharan
Hariharan

Reputation: 3263

Solved the problem by using jquery. Below is the fix.

$(document).on('click','a[href^="#tab"]',function(){
                $('a[href^="#tab"]').siblings('div').css('height',0);
                if($(this).siblings('div').height() == 0){
                        $(this).siblings('div').css('height',28); 
            }
                else {
                $(this).siblings('div').css('height',0);
            }       
            })

Upvotes: 1

Related Questions