Home>

I ask for JS help

How to make a disclosure accordion on the search word? That is, we have a search field, for example, we enter the word "one", if in some kind of accordion there is a given word or an accordion expression opens, and the word assigns Tag Strong /B

Sample code:

<
Link REL= "Stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
≪
script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" >
≪
/script >
≪
Form Method= "" "Class="PX-3 MT-3 MB-4 ">
  ≪
INPUT TYPE= "TEXT" ID= "SEARCH" NAME= "SEARCH" >
  ≪
INPUT TYPE= "submit" value= "search" >
≪
/Form >
≪
DIV Class= "Accordion" id= "" >
  ≪
DIV Class= "Card" >
≪
DIV Class= "Card-Header" id= "Headingone" >
  ≪
H2 Class= "MB-0" >
    ≪
Button Class= "BTN BTN-Link" Type= "Button" Data-Toggle= "collapse" data-target= "# collapseone" aria-expanded= "false" aria-controls= "collapseone" >
      COLLAPSILE GROUP ITEM # 1
    ≪
/Button >
  ≪
/h2 >
≪
/div >
≪
DIV ID= "COLLAPSEONE" CLASS= "COLLAPSE" aria-labelledby= "Headingone" >
  ≪
DIV Class= "Card-Body" >
    One.
  ≪
/div >
≪
/div >
  ≪
/div >
  ≪
DIV Class= "Card" >
≪
DIV Class= "Card-Header" id= "HeadingTwo" >
  ≪
H2 Class= "MB-0" >
    ≪
button class= "btn btn-link collapsed" type= "button" data-toggle= "collapse" data-target= "# collapsetwo" aria-expanded= "false" aria-controls= "collapseetwo" >
      COLLAPSILE GROUP ITEM # 2
    ≪
/Button >
  ≪
/h2 >
≪
/div >
≪
DIV ID= "COLLAPSETWO" CLASS= "COLLAPSE" ARIA-LABELLEDBY= "HEADINGTWO" >
  ≪
DIV Class= "Card-Body" >
    Two
  ≪
/div >
≪
/div >
  ≪
/div >
  ≪
DIV Class= "Card" >
≪
DIV Class= "Card-Header" id= "HeadingThree" >
  ≪
H2 Class= "MB-0" >
    ≪
Button class= "BTN BTN-Link collapsed" Type= "Button" Data-Toggle= "Collapse" Data-Target= "# collapseethree" aria-expanded= "false" aria-controls= "collapseethree" >
      COLLAPSILE GROUP ITEM # 3
    ≪
/Button >
  ≪
/h2 >
≪
/div >
≪
DIV ID= "COLLAPSETHREE" CLASS= "COLLAPSE" aria-labelledby= "HeadingThree" >
  ≪
DIV Class= "Card-Body" >
    One Three.
  ≪
/div >
≪
/div >
  ≪
/div >
≪
/div >

just code on JSFIDDLE:> https://jsfiddle.net/synapse3/voq4gfc2/7/

And what have the CSS and HTML labels?

Инквизитор2021-07-23 12:33:31

despite the fact that you need to highlight like that

Tilea Website2021-07-23 13:32:50

And where is the accordion? Fidla does not work

Stepan Kasyanenko2021-07-23 13:55:04

Allocation is already the execution of the result of the script, and the task is precisely in this work. You do not ask how to fill, so do not disinform others from the wrong marks.

Инквизитор2021-07-23 14:57:11
  • Answer # 1

    Maybe someone will once need a ready-made solution: https://jsfiddle.net/synapse3/wo6j32ex/17/

    $ ('# Find'). click (function () {
        VAR BTN= $ (this);
        BTN.PROP ("Disabled", True); //__________________________________________________________ DISABLE THE BUTTON, OTHERWISE CLICKING FAST WILL CAUSE BUGS DUE TO THE ANIMATION TIMES
        var term= $ ('# TERM'). Val (); //_________________________________________________________ Get The Search Term from the Input
        $ ('. collapse'). collapse ("Hide"); //_________________________________________________ Colapse all the sections
        VAR RD= New Regexp ('<
    Span class= "Found" >
    ('+ Term +') <
    \ /span >
    ', "Ig"); //_________________ REMOVE ANYTHING WE MIGHT WAVE FOUND WITH A PREVIOUS SEARCH
        $ ('# Accordion-FAQ'). HTML ($ (# Accordion-FAQ '). HTML (). REPLACE (RD,' $ 1 '));
        var occurences= []; //_______________________________________________________________ This Array Will Hold The Idexes of Any Sections We Find Our Search Term In
        $ ('# Accordion FAQ .Panel-Body'). Each (Function (I, E) {//_____________________________________ Loop Through Each Section Looking for Our Term
            var r= new regExp ('(' + Term + ')', "Ig"); //__________________________________________ Create A Regex from Our Term
            if ($ (this) .html (). Match (R)) {
                var matches= $ (this) .html (). Match (R); //_______________________________________ Get All the Matches
                $ .each (Matches, Function () {//__________________________________________________ LOOP THROUGH THIM
                    occurences.push (i); //______________________________________________________ PUSH THE INDEX OF THIS SECTION `$ ('# Accordion-Faq .panel-Body')` onto the array
                });
                $ (this) .html ($ (this) .html (). REPLACE (R, '<
    Span class= "Found" >
    $ 1 <
    /span >
    ')); //__ Wrap Each Found Search Term With Our `Found` Span to Highlight It
            }
        });
        var l= occurences.length; //________________________________________________________ Get How Many Matches We Found
        VAR C= NUMBER ($ # # Current '). HTML ()); //______________________________________________ Get the CurrentLly Viewed Match
            C= C >
     0? c+ 1: 0; //_________________________________________________________ IL WE ARE CURRENTLY VIEWING A MATCH, INCREMENT SO WE MOVE TO THE NEXT ONE
            C= C >
     l? 1: C; //_________________________________________________________ of the incremented Number of Matches, Reset IT to 0
            C= C== 0 &
    &
     L >
     0? 1: C; //___________________________________________________ If this is the first click and we found matches, Set Current to the first match
        $ ('# Count'). HTML (L >
     0? 'of' + L: 'Matches Found in Document'); //________________ Set The Text for Our Number of Matches Found
        $ ('# Current'). HTML (C); //________________________________________________________ SET THE TEXT FOR THE CURRENTLY VIEWED MATCH
        if (C!= 0) {
            $ ('# Accordion-FAQ .titlecollapse'). EQ (Occurences [C-1]) .Click (); //_________________ Open the Section Holding The Currently Viewed Match using the indexes We Stored Earlier
            $ ('. Found'). EQ (C-1) .focus (); //____________________________________________________ SET FOCUS TO CURRENTLY VIEWED MATCH
        }
        SetTimeout (Function () {btn.prop ("disabled", false);},
     1000); //________________________ SET A TIMMER TO RE-ENABLE THE BUTTON, THIS GIVES THE ANIMATIONS TIME TO PLAYOUT, OTHERWISE BUGS WILL OCCUR AND MULTIPLE SETCIONS WILL STAY OPEN IF THE USER CLICKS FAST
    });
    //_____________________________________________________________________________________ RESET EVERYTHING IF THE USER STARTS TYPING AGAIN
    $ ('# Term'). Keydown (Function () {
        var term= $ ('# TERM'). Val (); //_________________________________________________________ Get The Search Term from the Input
        VAR RD= New Regexp ('<
    Span class= "Found" >
    ('+ Term +') <
    \ /span >', "Ig"); //_________________ REMOVE ANYTHING WE MIGHT HAVE FOUND WITH A PREVIOUS SEARCH $ ('# Accordion-FAQ'). HTML ($ (# Accordion-FAQ '). HTML (). REPLACE (RD,' $ 1 '));
        $ ('# Count'). HTML (''); //Reset Our Labels
        $ ('# Current'). HTML ('');
    }); 
    .found {
      Background-Color: Yellow;
      Font-Size: 16px;
    }
    #Labels {
      margin-left: 15px;
      Font-Size: 16px;
    } 
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/JQuery/3.3.1/jquery.min.js" >
    ≪
    /script >
    ≪
    Link REL= "stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >
    ≪
    script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" >
    ≪
    /script >
    ≪
    INPUT TYPE= "TEXT" ID= "TERM" PLACEHOLDER= "SEARCH .." />
    ≪
    INPUT TYPE= "Button" id= "Find" value= "Find" />
    ≪
    Div id= "labels" >
      ≪
    span id= "current" >
    ≪
    /span >
    ≪
    SPAN ID= "COUNT" >
    ≪
    /span >
    ≪
    /div >
    ≪
    DIV Class= "Accordion" id= "Accordion-FAQ" >
      ≪
    DIV Class= "TitleCollapse" Data-Toggle= "Collapse" Data-Target= "# Accordion1" aria-expanded= "false" >
     Sample Heading One <
    /div >
      ≪
    Div id= "Accordion1" class= "collapse" >
        ≪
    Div Class= "Panel-Body" >
          ≪
    P >
    Cool Sample Paragraph One <
    /P >
        ≪
    /div >
      ≪
    /div >
      ≪
    DIV Class= "TitleCollapse" Data-Toggle= "Collapse" Data-Target= "# Accordion2" aria-expanded= "false" >
    Sample Heading TWO <
    /div >
      ≪
    DIV ID= "Accordion2" class= "collapse" >
        ≪
    Div Class= "Panel-Body" >
          ≪
    P >
    Cool Sample Paragraph TWO <
    /P >
        ≪
    /div >
      ≪
    /div >
      ≪
    DIV Class= "TitleCollapse" Data-Toggle= "collapse" Data-target= "# Accordion3" aria-expanded= "false" >
    Sample Heading Three <
    /div >
      ≪
    Div id= "Accordion3" class= "collapse" >
        ≪
    Div Class= "Panel-Body" >
          ≪
    P >
    Cool Sample Paragraph One <
    /P >
        ≪
    /div >
      ≪
    /div >
      ≪
    DIV Class= "TitleCollapse" Data-Toggle= "Collapse" Data-target= "# Accordion4" aria-expanded= "false" >
    Sample Heading Four <
    /div >
      ≪
    DIV ID= "Accordion4" class= "collapse" >
        ≪
    Div Class= "Panel-Body" >
          ≪
    P >
    Cool Sample Paragraph Two Cool <
    /P >
        ≪
    /div >
      ≪
    /div >
    ≪
    /div >
    
  • Answer # 2

    Maybe someone will once need a ready-made solution: https://jsfiddle.net/synapse3/wo6j32ex/17/

    $ ('# Find'). click (function () {
        VAR BTN= $ (this);
        BTN.PROP ("Disabled", True); //__________________________________________________________ DISABLE THE BUTTON, OTHERWISE CLICKING FAST WILL CAUSE BUGS DUE TO THE ANIMATION TIMES
        var term= $ ('# TERM'). Val (); //_________________________________________________________ Get The Search Term from the Input
        $ ('. collapse'). collapse ("Hide"); //_________________________________________________ Colapse all the sections
        VAR RD= New Regexp ('<
    Span class= "Found" >
    ('+ Term +') <
    \ /span >
    ', "Ig"); //_________________ REMOVE ANYTHING WE MIGHT WAVE FOUND WITH A PREVIOUS SEARCH
        $ ('# Accordion-FAQ'). HTML ($ (# Accordion-FAQ '). HTML (). REPLACE (RD,' $ 1 '));
        var occurences= []; //_______________________________________________________________ This Array Will Hold The Idexes of Any Sections We Find Our Search Term In
        $ ('# Accordion FAQ .Panel-Body'). Each (Function (I, E) {//_____________________________________ Loop Through Each Section Looking for Our Term
            var r= new regExp ('(' + Term + ')', "Ig"); //__________________________________________ Create A Regex from Our Term
            if ($ (this) .html (). Match (R)) {
                var matches= $ (this) .html (). Match (R); //_______________________________________ Get All the Matches
                $ .each (Matches, Function () {//__________________________________________________ LOOP THROUGH THIM
                    occurences.push (i); //______________________________________________________ PUSH THE INDEX OF THIS SECTION `$ ('# Accordion-Faq .panel-Body')` onto the array
                });
                $ (this) .html ($ (this) .html (). REPLACE (R, '<
    Span class= "Found" >
    $ 1 <
    /span >
    ')); //__ Wrap Each Found Search Term With Our `Found` Span to Highlight It
            }
        });
        var l= occurences.length; //________________________________________________________ Get How Many Matches We Found
        VAR C= NUMBER ($ # # Current '). HTML ()); //______________________________________________ Get the CurrentLly Viewed Match
            C= C >
     0? c+ 1: 0; //_________________________________________________________ IL WE ARE CURRENTLY VIEWING A MATCH, INCREMENT SO WE MOVE TO THE NEXT ONE
            C= C >
     l? 1: C; //_________________________________________________________ of the incremented Number of Matches, Reset IT to 0
            C= C== 0 &
    &
     L >
     0? 1: C; //___________________________________________________ If this is the first click and we found matches, Set Current to the first match
        $ ('# Count'). HTML (L >
     0? 'of' + L: 'Matches Found in Document'); //________________ Set The Text for Our Number of Matches Found
        $ ('# Current'). HTML (C); //________________________________________________________ SET THE TEXT FOR THE CURRENTLY VIEWED MATCH
        if (C!= 0) {
            $ ('# Accordion-FAQ .titlecollapse'). EQ (Occurences [C-1]) .Click (); //_________________ Open the Section Holding The Currently Viewed Match using the indexes We Stored Earlier
            $ ('. Found'). EQ (C-1) .focus (); //____________________________________________________ SET FOCUS TO CURRENTLY VIEWED MATCH
        }
        SetTimeout (Function () {btn.prop ("disabled", false);},
     1000); //________________________ SET A TIMMER TO RE-ENABLE THE BUTTON, THIS GIVES THE ANIMATIONS TIME TO PLAYOUT, OTHERWISE BUGS WILL OCCUR AND MULTIPLE SETCIONS WILL STAY OPEN IF THE USER CLICKS FAST
    });
    //_____________________________________________________________________________________ RESET EVERYTHING IF THE USER STARTS TYPING AGAIN
    $ ('# Term'). Keydown (Function () {
        var term= $ ('# TERM'). Val (); //_________________________________________________________ Get The Search Term from the Input
        VAR RD= New Regexp ('<
    Span class= "Found" >
    ('+ Term +') <
    \ /span >', "Ig"); //_________________ REMOVE ANYTHING WE MIGHT HAVE FOUND WITH A PREVIOUS SEARCH $ ('# Accordion-FAQ'). HTML ($ (# Accordion-FAQ '). HTML (). REPLACE (RD,' $ 1 '));
        $ ('# Count'). HTML (''); //Reset Our Labels
        $ ('# Current'). HTML ('');
    }); 
    .found {
      Background-Color: Yellow;
      Font-Size: 16px;
    }
    #Labels {
      margin-left: 15px;
      Font-Size: 16px;
    } 
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/JQuery/3.3.1/jquery.min.js" >
    ≪
    /script >
    ≪
    Link REL= "stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >
    ≪
    script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" >
    ≪
    /script >
    ≪
    INPUT TYPE= "TEXT" ID= "TERM" PLACEHOLDER= "SEARCH .." />
    ≪
    INPUT TYPE= "Button" id= "Find" value= "Find" />
    ≪
    Div id= "labels" >
      ≪
    span id= "current" >
    ≪
    /span >
    ≪
    SPAN ID= "COUNT" >
    ≪
    /span >
    ≪
    /div >
    ≪
    DIV Class= "Accordion" id= "Accordion-FAQ" >
      ≪
    DIV Class= "TitleCollapse" Data-Toggle= "Collapse" Data-Target= "# Accordion1" aria-expanded= "false" >
     Sample Heading One <
    /div >
      ≪
    Div id= "Accordion1" class= "collapse" >
        ≪
    Div Class= "Panel-Body" >
          ≪
    P >
    Cool Sample Paragraph One <
    /P >
        ≪
    /div >
      ≪
    /div >
      ≪
    DIV Class= "TitleCollapse" Data-Toggle= "Collapse" Data-Target= "# Accordion2" aria-expanded= "false" >
    Sample Heading TWO <
    /div >
      ≪
    DIV ID= "Accordion2" class= "collapse" >
        ≪
    Div Class= "Panel-Body" >
          ≪
    P >
    Cool Sample Paragraph TWO <
    /P >
        ≪
    /div >
      ≪
    /div >
      ≪
    DIV Class= "TitleCollapse" Data-Toggle= "collapse" Data-target= "# Accordion3" aria-expanded= "false" >
    Sample Heading Three <
    /div >
      ≪
    Div id= "Accordion3" class= "collapse" >
        ≪
    Div Class= "Panel-Body" >
          ≪
    P >
    Cool Sample Paragraph One <
    /P >
        ≪
    /div >
      ≪
    /div >
      ≪
    DIV Class= "TitleCollapse" Data-Toggle= "Collapse" Data-target= "# Accordion4" aria-expanded= "false" >
    Sample Heading Four <
    /div >
      ≪
    DIV ID= "Accordion4" class= "collapse" >
        ≪
    Div Class= "Panel-Body" >
          ≪
    P >
    Cool Sample Paragraph Two Cool <
    /P >
        ≪
    /div >
      ≪
    /div >
    ≪
    /div >