Accordion Menu

How do I default the Accordion Menu to all drop downs being closed. I always have one opened by default and it messes up the starting look.

  • Rupok

    Hi Web Services, hope you had a wonderful day.

    I could give you custom jQuery code to do this if I could inspect the element live. Can you please provide the link where we can see your according live? And if that page has multiple accordions, can you please specify which one to work on?

    I'm looking forward to hear from you and resolve this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Web Services

    I am working within a development server. It's intranet only behind the firewall. I have two accordions on a page.

    *From inspect live this is the code of the accordion I needing to be closed:
    <div class="upfront-output-module c6" id="module-1468268771394-1786">
    <div data-preset_map="{"desktop":"portlet-menu-a"}" class="upfront-output-object portlet-menu-a upfront-output-uaccordion upfront-accordion" id="uaccordion-object-1468268771394-1126">
    <div class="upfront-accordion-container accordion-preset-portlet-menu-a">
    <div class="upfront-accordion-wrap">
    <!-- <b class="upfront-entity_meta upfront-ui">

    </b> -->
    <div class="accordion-panel">
    <div class="accordion-panel-title" id="title_uaccordion-object-1468268771394-1126-0">
    <p class="">Grades</p>
    </div>
    <div id="uaccordion-object-1468268771394-1126-0" class="accordion-panel-content" style="display: none;">
    <p class="">F: Technology in Instruct Setting
    B: Rdng Diagnosis & Remediation
    A: Plants and People
    A: History of Texas
    I: Geometry
    </p>
    </div>
    <i>x</i>
    </div>
    <div class="accordion-panel accordion-panel-active">
    <div class="accordion-panel-title" id="title_uaccordion-object-1468268771394-1126-1">
    <p class="">Holds</p>
    </div>
    <div id="uaccordion-object-1468268771394-1126-1" class="accordion-panel-content" style="display: block;">
    <p class="">5 Drops Remaining: State Drop Limit
    Past Due Balance, Loan, RL: Outstanding Balance
         Registration
         Transcript
         Graduation
         Enrollment Verification
    </p>
    </div>
    <i>x</i>
    </div>
    </div>
    </div>
    </div>
    </div>

    I can copy the theme I am working on and put in a place you can get to it. It will only be a static copy though. Let know if that will work.

    Thanks!

  • Nithin

    Hi Web Services,

    Hope you are doing good today. :slight_smile:

    <?php
    add_action( 'wp_footer', 'uf_collapse_accordion' );
    function uf_collapse_accordion() {
        ?>
        <script type="text/javascript">
          jQuery(document).ready(function() {
          jQuery('.accordion-panel').removeClass('accordion-panel-active');
          });
        </script>
        <?php
    }

    Could you please try the following jQuery code. Please do note to add this in your /mu-plugins. Just copy the above code, and add this in a php file(you can give any name), in your /mu-plugins folder. You'll have to create the /mu-plugins folder inside /wp-content folder in order to make this work. Check this link for more info about using mu-plugins: https://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    I hope this helps. Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Rupok

    Hi Web Services, hope you had a wonderful day.

    I could give you exact working code if I could test this on your site. But the following code should help you regarding how you can do this:

    jQuery('.accordion-panel-active').click(function(){
        jQuery('.accordion-panel-active').removeClass('accordion-panel-active');
    });

    Please let us know how it goes. We will be glad to help further if required.

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Rob, hope you had a wonderful day.

    You can use the following code:

    <?php
    add_action( 'wp_footer', 'uf_collapse_accordion' );
    function uf_collapse_accordion() {
        ?>
        <script type="text/javascript">
         	jQuery(document).ready(function() {
        		jQuery('.accordion-panel').removeClass('accordion-panel-active');
        	});
    		jQuery('.accordion-panel-active').click(function(){
    		    jQuery('.accordion-panel-active').removeClass('accordion-panel-active');
    		});
        </script>
        <?php
    }

    Please let us know if you have any confusion or if you are stuck at any point. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Web Services

    We were able to get the accordion panels to close after the page was fully loaded using the first add_action code in a separate plugin. Your last code example worked in the same way as my first try to make the open panel close. It worked but was immediately undone by the Upfront script. I was able to reset all the child panel content to display:none without it getting rewritten, but there was no animation.

    I was only able to make it work as desired by modifying uaccordion-front.js

    ;(function($){
    	$(function () {
    		$('.accordion-panel:not(.accordion-panel-active) .accordion-panel-content').hide();	
    
    		$('body').on('touchstart click', '.accordion-panel', function(event) {
    			var $panel = $(event.currentTarget);
    			var contentId;
    
    			if ($panel.hasClass('accordion-panel-active')) {
    				$panel.removeClass('accordion-panel-active').find('.accordion-panel-content').slideUp();
    				return;
    			}
    			$panel.addClass('accordion-panel-active').find('.accordion-panel-content').slideDown();
    			$panel.siblings().removeClass('accordion-panel-active').find('.accordion-panel-content').slideUp();
    		});
    	});

    I inserted "$panel.removeClass('accordion-panel-active').find('.accordion-panel-content').slideUp();" in line 10 just before the return.

    I hope you will consider adding this to your code, or create an option for this, so it will not get wiped out in the next update.

    Thanks,
    Al

  • Mtwo

    Hello,

    I was wondering if you found a correct way to add click panel titles to close accordion panels. I have tried the above code, but was only able to make the click panel title to close work by modifying uaccordion-front.js, which we all know will be overwritten by updates. I can also confirm that the modification does not work on mobile as I also experienced the touch open and immediately close issue. I noticed that if you touch and then drag out of the accordion area, the panel will stay open, but this is not a good solution.

    Is there a way to add the ability to click the panel title to close the accordion panel, while allowing all to be closed? Please let me know if you know of a solution.

    Thanks

  • Web Services

    I fixed the mobile problem a while back, but forgot to update this. This code works in mobile and I've found no unintended behavior, yet.

    ;(function($){
    	$(function () {
    		$('.accordion-panel:not(.accordion-panel-active) .accordion-panel-content').hide();	
    
    		$('.accordion-panel').on('click', function(event) {
    			var $panel = $(event.currentTarget);
    			var contentId;
    
    			if ($panel.hasClass('accordion-panel-active')) {
    				$panel.removeClass('accordion-panel-active').find('.accordion-panel-content').slideUp();
    				return;
    			}
    			$panel.addClass('accordion-panel-active').find('.accordion-panel-content').slideDown();
    			$panel.siblings().removeClass('accordion-panel-active').find('.accordion-panel-content').slideUp();
    		});
    	});

    /var/www/html/wp-content/themes/upfront/elements/upfront-accordion/js/uaccordian-front.js

    This needs to be placed in uaccordian-front.js when Upfront is updated. It should be lines 1-16 replacing all code before:

    /**
    	 * Fix DOM children responsive preset classes
    	 *
    	 * Legacy preset elements ...
  • Mtwo

    Thanks for the quick reply. I have made this change and it does work on both desktop and mobile. Whenever an open panel is clicked, it closes. However, inside of the accordion I have popup links and whenever one of those links is clicked, the accordion closes. This is not desired, as I would want the user to see the list within the accordion after closing the popup. Can the click event be moved to the .accordion-panel-title? So the panel only closes when the panel title is click and not the entire .accordion-panel? Please let me know and thanks again.
    M

    • Web Services

      You could certainly try that, but it works for what I need. This is what I used to see what was going on with the events. It might help you figure it out.

      <!DOCTYPE html>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      
          <script type="text/javascript">
              $(document).ready(function(){
                  $("body").on("touchstart touchend click mousedown mouseup",function(e){
                      $("div").append("<br />Event: " + e.type);
                  });
              });
          </script>
      	<style>
      		.touch{
      			border-style: solid;
      			border-width: 5px;
      		}
      	</style>
      </head>
      <br /><br /><br />
      <body>
          <table>
              <tr>
      			<td> &nbsp; &nbsp; &nbsp;</td>
                  <td class="touch"> &nbsp; touch or click here, once &nbsp; </td>
              </tr>
          </table>
      <br /><br />
      <div />
      </body>

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.