Click here to Skip to main content
15,886,067 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionEasy HTML Editor Pin
Bram van Kampen3-Dec-18 15:23
Bram van Kampen3-Dec-18 15:23 
AnswerRe: Easy HTML Editor Pin
Nathan Minier6-Dec-18 1:24
professionalNathan Minier6-Dec-18 1:24 
AnswerRe: Easy HTML Editor Pin
Nitin S7-Dec-18 1:57
professionalNitin S7-Dec-18 1:57 
AnswerRe: Easy HTML Editor Pin
RedDk28-Dec-18 11:44
RedDk28-Dec-18 11:44 
GeneralRe: Easy HTML Editor Pin
Bram van Kampen28-Dec-18 12:55
Bram van Kampen28-Dec-18 12:55 
QuestionProblems to obtain value "0" or "1" from a div Pin
serenimus1-Dec-18 0:37
serenimus1-Dec-18 0:37 
AnswerRe: Problems to obtain value "0" or "1" from a div Pin
ZurdoDev4-Dec-18 2:27
professionalZurdoDev4-Dec-18 2:27 
QuestionUnable to switch events in jquery Pin
vmann30-Nov-18 18:45
vmann30-Nov-18 18:45 
I have some sort of similar markup as shown in last.

I want to filter the inner text elements based upon ids innerfilter1, innerfilter2.

I have also written code for hide general content based upon the outer filter. i.e. myid1 and myid2 which works fine. Here ids will hide divs have same classes

JavaScript
$('ul.nav.nav-tabs>li>a').click(function(){
    var curtab = $(this).attr('href').substring(1);
      console.log(curtab);
    $('.tab-content .tab-pane').each(function(){
      var tabid = this.className;
      if(tabid.indexOf(curtab) > -1){
        $(this).siblings().hide();
      }
    });
    $(this).show();
  });

});

But nested filters use to filter the content which is not general but having filter either innerfilter1, innerfilter2. I have tried below code but this effects other tabs as well also impact

JavaScript
$('div.inner-tab-box>ul.nav.nav-tabs>li>a').click(function(){
    var curtab = $(this).attr('href').substring(1);
    $('.tab-content .tab-pane').each(function(){
      var tabid = this.id;
      if(tabid.indexOf(curtab) > -1){
        $(this).siblings().each( function () {
            var tx=this.id;
            if(tx==='general') {
            } else {
               $(this).hide();
            }
        });
        $(this).show();
      }
    }); 
});

Full Markup
JavaScript
<div class="top-header">
   <div class="container-fluid">
      <div class="header-top">
         <!-- Tabs -->
         <div id="tabs">

            <!-- tabs start  -->
            <div class="tab-content">
               <!-- part 1 Will execute 2 times as  per filters-->
               <div role="tabpanel" class="tab-pane active" id="myid1">
                  <div class="row">
                     <div class="col-xs-5ths ">
                        <div class="dark-box-outer">
                           <div class="top-light-text-box">
                              <div class="inner-tab-box ">
                                 <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class=""><a href="#innerfilter1" aria-controls="home" role="tab" data-toggle="tab">></a></li>
                                    <li role="presentation" class=""><a href="#innerfilter2" aria-controls="profile" role="tab" data-toggle="tab"></a></li>
                                 </ul>
                                 [B]<div class="tab-content">
                                    <div role="tabpanel" class="tab-pane myid1 " id="innerfilter1">
                                       <ul>
                                          <li>
                                            /* Some Content */
                                          </li>
                                       </ul>
                                    </div>
                                    <div role="tabpanel" class="tab-pane myid1 " id="innerfilter2">
                                       <ul>
                                          <li>
                                          /* Some Content */
                                          </li>
                                       </ul>
                                    </div>
                                    <div role="tabpanel" class="tab-pane myid1 " id="general">
                                       <ul>
                                          <li>
                                          /* Some Content */
                                          </li>
                                       </ul>
                                    </div>
                                    <div role="tabpanel" class="tab-pane myId2 " id="general">
                                       <ul>
                                          <li>
                                          /* Some Content */
                                          </li>
                                       </ul>
                                    </div>[/B]
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="col-xs-5ths ">   
                        <!-- Repeated Markup   -->             
                     </div>
                     <div class="col-xs-5ths ">  
                        <!-- Repeated Markup   -->                                 
                     </div>
                     <div class="col-xs-5ths ">
                            <!-- Repeated Markup   -->                                
                     </div>
                     <div class="col-xs-5ths ">

                     </div>
                  </div>
               </div>
               <!-- end part 1 -->
               <div role="tabpanel" class="tab-pane " id="myId2">
                <!--Repeated Content For myId2-->
               </div>
               <!-- end part 1 -->
            </div>
            <!-- End part 2 -->
         </div>
      </div>
      <!-- ./Tabs -->
   </div>
</div>

Can anyone help me to fix this.

Thanks
SuggestionRe: Unable to switch events in jquery Pin
ZurdoDev4-Dec-18 2:28
professionalZurdoDev4-Dec-18 2:28 
QuestionError on line 45 Pin
ghazabaz30-Nov-18 13:38
ghazabaz30-Nov-18 13:38 
AnswerRe: Error on line 45 Pin
ZurdoDev4-Dec-18 2:29
professionalZurdoDev4-Dec-18 2:29 
AnswerRe: Error on line 45 Pin
maryam.saboor4-Dec-18 23:54
professionalmaryam.saboor4-Dec-18 23:54 
Questiondata transfer in two dimensional array format Pin
Member 1406088822-Nov-18 20:31
Member 1406088822-Nov-18 20:31 
QuestionRe: data transfer in two dimensional array format Pin
ZurdoDev4-Dec-18 2:29
professionalZurdoDev4-Dec-18 2:29 
QuestionJavascript syntax Pin
ghazabaz22-Nov-18 15:48
ghazabaz22-Nov-18 15:48 
AnswerRe: Javascript syntax Pin
Graham Breach22-Nov-18 21:36
Graham Breach22-Nov-18 21:36 
AnswerRe: Javascript syntax Pin
NithyaKumarJai25-Nov-18 18:23
NithyaKumarJai25-Nov-18 18:23 
Questionunexpected result function autocomplete() Jquery Pin
serenimus21-Nov-18 7:15
serenimus21-Nov-18 7:15 
AnswerRe: unexpected result function autocomplete() Jquery Pin
Richard Deeming21-Nov-18 8:16
mveRichard Deeming21-Nov-18 8:16 
GeneralRe: unexpected result function autocomplete() Jquery Pin
serenimus22-Nov-18 6:11
serenimus22-Nov-18 6:11 
GeneralRe: unexpected result function autocomplete() Jquery Pin
serenimus22-Nov-18 6:13
serenimus22-Nov-18 6:13 
GeneralRe: unexpected result function autocomplete() Jquery Pin
Richard Deeming22-Nov-18 8:41
mveRichard Deeming22-Nov-18 8:41 
GeneralRe: unexpected result function autocomplete() Jquery Pin
serenimus1-Dec-18 0:19
serenimus1-Dec-18 0:19 
QuestionHello Pin
Member 1406106620-Nov-18 8:15
Member 1406106620-Nov-18 8:15 
QuestionJavascript help Pin
ghazabaz8-Nov-18 15:54
ghazabaz8-Nov-18 15:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.