Toggle Content area with button click

[HSLLC]

I’m trying to create my own custom “mega” menu and didn’t want to use the UBER menu plugin. I did create my own custom navigation using the “Content Dropdown” but I’m not able to make the dropdown full width because the drop down aligns to the left/right of the toggle button, so there’s a margin on the left or right which would be difficult to offset on every display.

So I decided to try a JS toggle on an element “content area” activated by a button click. I’m able to get it to work but I’m not able to get it to work within PRO.

In the custom header, I created a bar/container/ and added an element “button” and added the correct ID under “customize”. I then added another bar/container/ and added element “content area” and added correct ID to the bar in the “customize” section.

I then put in the following under the global JS under theme options. (I also tested in the header JS).

$( “#azn-btn-products” ).first().click(function() {
$( “#azn-menu-products” ).first().fadeToggle( “fast”, “linear” );
});

I can’t get it to work. I can get to work fine in my testing environment, but not in PRO.

[christopher]

Hi Duane,

This is a customization request which is outside of our support scope. Pro theme does not have the Mega Menu feature and our suggestion would be the UberMenu plugin but for some reason you avoid using that.

The only thing that we can help you with is that we suggest you to change the ID’s with unique Class’s. The reason behind that is that elements add additional suffixes after the ID that you add to Customize tab to make sure the uniqueness of the ID.

If you want to use ID, you need to be aware of which element you add the ID on and consult the article below to find the correct final result:

Elements Class and ID Structure | Themeco Docs

You can always use the Chrome browser developer toolbar to find out the correct generated IDs. If you need a refresher on how to use the tool I suggest that you watch the video below:

Thank you.

[HSLLC]

Thanks Chris.

UberMenu doesn’t do exactly what I want and I’m exploring my options. I also like to keep my plug-ins to a minimum and not use them when i don’t have to.

Yes, I use developer in all my browsers and My IDs look correct.

Oh well.

[friech]

Hi Mean,

While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Instead of the .first().fadeToggle function, try the toggleClass(), create a custom CSS class with a display:none; rule and hook that to your bar that contain the Content Area.

jQuery toggleClass()

Hope it helps,
Cheers!

[HSLLC]

Thanks.

I actually already did this and did get it to work. The issue was with my JS, although it was working in a testing environment, I had to make some edits for it to work in PRO/WP.

[nabeel]

Hey Mean,

We’re glad you managed to make it work and thank you for letting us know.

Cheers!