2 Replies Latest reply on Jan 17, 2013 1:33 PM by mmunir

    highlight hyperlink in accordion on click

    mmunir
    mmunir Jan 17, 2013 6:25 AM

      I am using rich:accordion panel on left side of my website in JSF for navigation. It contains hyperlinks for each page. I want that when a hyperlink is clicked, then after reloading new page, it should be selected so that user can know the link it has clicked.

       

      Similarly to visit someother page, if user clicks someother hyperlink in this control, then the previous hyperlink should be deselected and newly clicked link should be selected. Please help?

      • 315 Views
      • Tags:
        • 1. Re: highlight hyperlink in accordion on click
          michpetrov
          michpetrov Jan 17, 2013 11:01 AM (in response to mmunir)

          Simply check if the link leads to the current page, then highlight it if it does.

           

          I don't know what you're using but it can look like this:

           

          <a4j:repeat value="#{bean.links}" var="link">

               <a4j:commandLink value="#{link.name} style="#{link.name == bean.currentPage ? 'text-decoration: underline' : ''}" … />

          </a4j:repeat>

            • Actions
          • 2. Re: highlight hyperlink in accordion on click
            mmunir
            mmunir Jan 17, 2013 1:33 PM (in response to michpetrov)

            The links are not stored in any bean. Following is the code:

             

                    <div class="accordian">

                        <rich:accordion switchType="client" height="100%" width="100%">

                            <rich:accordionItem header="#{msg.definition}">

                                <table class="accordItem" width="100%">

                                    <tr><td><h:link id="book" value="#{msg.definition}" outcome="book" onclick=""></h:link></td></tr>

                                    <tr><td><h:link value="#{msg.students}" outcome="student"></h:link></td></tr>

                                </table>

                            </rich:accordionItem>

                            <rich:accordionItem header="#{msg.transactions}">

                                <table width="100%" class="accordItem">

                                    <tr><td><h:link value="#{msg.lending}" outcome="book"></h:link></td></tr>

                                    <tr><td><h:link value="#{msg.receiving}" outcome="book"></h:link></td></tr>

                                </table>

                            </rich:accordionItem>

                            <rich:accordionItem header="#{msg.reports}">

                                <table width="100%" class="accordItem">

                                    <tr><td><h:link value="#{msg.allbooks}" outcome="book"></h:link></td></tr>

                                    <tr><td><h:link value="#{msg.allstudents}" outcome="book"></h:link></td></tr>

                                    <tr><td><h:link value="#{msg.lendedbooks}" outcome="book"></h:link></td></tr>

                                    <tr><td><h:link value="#{msg.fine}" outcome="book"></h:link></td></tr>

                                </table>

                            </rich:accordionItem>

                        </rich:accordion>

                    </div>

              • Actions