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

    highlight hyperlink in accordion on click

    Moazzam Munir Newbie

      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?

        • 1. Re: highlight hyperlink in accordion on click
          Michal Petrov Master

          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>

          • 2. Re: highlight hyperlink in accordion on click
            Moazzam Munir Newbie

            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>