The rest of the tabs are closed. You’ll need to click on each to open and view their content.

If you want the first tab closed on default for aesthetic, design, or any other reason, you won’t find the option to do it through the plugin’s edit panel.

However, setting the accordion widget closed on page load is still possible using a simple script.

This tutorial will show you how to set the Elementor accordion widget closed by default.

How to Default Close Elementor Accordions

Elementor widgets generate the content with HTML elements added to the screen.

Each section or element gets its own set of body classes based on your assigned settings.

The CSS and JavaScript files are fired on page load, and the design or behavior for each element is applied based on its class.

While inspecting the accordion HTML element, you’ll notice that the elementor-active class triggers a specific behavior.

To close the accordion by default, we must run JavaScript code to remove that class.

We will cover all scenarios of how to close the accordions:

• Single accordion
• All accordions together
• Specific accordions only

Let’s start with the first option, close a single accordion,

Default Close a Single Accordion

This method is perfect if you only want to close a single accordion on a page.

In this case, drag an HTML widget above the accordion widget, and paste this JavaScript code inside.

<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>

Save the changes and reload the page to ensure the accordion is closed.

You may see it open for a split second until the JavaScript file executes and close it.

Close All Elementor Accordions by Default

If you want to close all current and future accordions on your website, you’ll need to fire the same code above from your header template.

You can place the code above in your template files by using any code snippet plugin or the Custom Codes option of Elementor Pro.

You can read more about the different options in our Add JavaScript to Elementor article.

With Elementor Pro, navigate to the Custom Codes screen and click Add New.

Give the code snippet a name, paste it inside the code box, and publish it.

Once published, revisit any page with accordion and verify it’s now closed by default.

Default Close Specific Accordions

We understand that, in some cases, you would like to have some accordions closed while others can stay open.

We’ll need to assign a unique class name to the accordions we want to close by default, to differentiate them from the others.

First, click on the Advanced tab of the accordion widgets you would like to close, and enter closeAccordion in their CSS Classes box.

Then, create a custom code in Elementor Pro, paste the following code inside, and save the changes.

<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.closeAccordion .elementor-tab-title').removeClass('elementor-active');
 $('.closeAccordion .elementor-tab-content').css('display', 'none'); }, delay);
});
</script>

Once saved, refresh any page containing an accordion widget with the closeAccordion class and verify it’s closed now.

You can also check the other accordion widget without the added class and verify that it functions as usual.

Troubleshooting if Accordion is Not Closed by Default

The JavaScript code we use above holds a delay function that will be triggered one second after the page is fully loaded.

The idea is to fire the script only after all the Elementor files are rendered on the page.

While it will work flawlessly for most designs, it will take longer than a second to load for heavy-content websites. Therefore, the code will be firing before Elementor is finished loading.

In such cases, the Elementor default files will overwrite our custom code and keep the accordion open.

To fix that, change the set time of the delay function to a more significant number. For example, switch 100 to 1000, and test it again.

Keep increasing the delay property number until you find the proper delay value for your website. 

Remember not to get discouraged by a high number because it will take the visitors more than a couple of seconds to scroll to the accordion section, which will be close by then. 

Conclusion

Elementor doesn’t have the option to toggle close the accordion widget by default.

However, we could still default close the accordion with a simple script; this tutorial showed you how to do that easily.

Leave a comment and tell us which one of the methods we presented works the best for you.

The post How to Set the Elementor Accordion Widget Closed by Default appeared first on PluginsForWP.

A drop-down box is an efficient way to direct visitors to act by choosing one of the list’s options.

This article will show you how to create a drop-down list box and display it with Elementor.

When to Use the Drop-Down List Box

The idea of using a drop-down list comes in handy in a funnel-like structure to encourage visitors to choose a single option out of many.

For example, the WooCommerce plugin uses the dropdown select box in their product pages to display multiple options.

When customers visit the page, they’ll need to expand the list box with the variable options and select the option that fits them best.

Another typical case for using the drop-down list, as we did and many more sites, is on the contact us page.

Because our visitors are contacting us for various reasons, we created a dedicated contact form for each department.

Before creating a new support ticket, you’ll need to select the subject you need help with, and a contact form will be displayed based on your selection.

A drop-down list menu is an innovative and effective way to maximize productivity and offer our best support.

How to Create a Dropdown List in Elementor

Although Elementor doesn’t have a native widget to add a dropdown list box, we can still create it by installing an extension like Unlimited Elements or with HTML.

Because an Elementor extension will add many extra code files and stylesheets, it will be better practice to use the HTML method instead.

Creating a dropdown list is a couple of steps process made by these components:

• First, the HTML structure – to enter the different selecting options.
• Adding JavaScript – to control what will happen after selecting one of the options.

Combining the HTML structure with JavaScript is optional, but I can’t think of a scenario where only use the dropdown box by itself.

Create the Dropdown HTML Code

The <select> tag and a nested <option> tag for each list option assemble a drop-down navigation list.

In addition, we can add a <label> tag before the code to add a title to the list.

For example, to display an options list of the best WordPress plugin names, we will use the code below:

<label for="wpPluginsList"><b>What's your favorite WordPress plugin?</b></label><br>

<select name="wpPluginsList" id="wpPluginsList">
  <option>Please choose one of these options:</option>
  <option value="Elementor-plugin">Elementor</option>
  <option value="Woo-plugin">WooCommerce</option>
  <option value="Seo-plugin">Yoast</option>
</select>

The name attribute assigned to the elements is needed to reference the form’s data after submission, and the id attribute is used to associate the list with the label.

The HTML structure above will render this dropdown list:

Please note: the for attribute value of the <label> element and the id attribute of the <select> element should match each other.

You can copy the exact code above or create a similar one with a code editor app like Visual Studio Code.

Once created, click on the edit with Elementor button to launch the visual editor, and drag the HTML widget to your desired location.

Then, paste the code inside the HTML widget and save the changes.

After saving, visit the live page and click on the dropdown list to ensure it’s working as expected.

If you only need the list, no more actions are required. However, add JavaScript if you want to trigger a movement after selecting an option.

Add the JavaScript Code

As mentioned earlier, Javascript is essential when creating a drop-down list element.

Initially, the code will watch for the visitors to select an option and react with an action.

The most common uses of the JS code in a drop-down box scenario are to scroll to the selected section or display it. Once you choose an option, you’ll be scrolled to the area assigned.

Regardless of the action you would like to perform, the process is ideally the same, and you’ll need to match the section ID to the value attribute text of the <option> tag.

For example, one of the value attributes of the option tags above is equal to the ‘Elementor-plugin‘. Therefore, I’ll assign the same value as an ID to the desired section.

Create many sections as needed and attach their unique id value to match their corresponding option tag from the drop-down list.

Once done, choose what you would like to happen after selecting an option from the drop-down list. The JavaScript codes below will either scroll to the section, display it, or both.

Scroll to the Dropdown Selected Section

This first code will check the selected option’s value and scroll you down to the top of its matching section.

You can paste the code below using an FTP or inside the plugin itself, as we showed you in the how to add JavaScript to Elementor tutorial.

<script>
(function ($) {
$(document).ready(function () {
  $('#wpPluginsList').change(function() {
    $selectedValue = $(this).val();
    $('html, body').animate({
        scrollTop: $('#'+$selectedValue).offset().top - 25
    },500);
  });
})
})(jQuery);
</script>

Once saved, revisit the page and select an option from the drop-down box. If coded correctly, you’ll be scrolled to the correct section.

If that was your only intention, you now have a fully functional drop-down menu created with Elementor. However, keep reading if you want to hide the sections and display them based on the user’s selections.

Show / Hide Sections Based on the Dropdown Selected Value

The code below will hide all the sections on the page load and only display a single one based on the user’s choice from the dropdown list.

Because we only want to hide specific sections, we need to assign a class to all the relevant departments to differentiate them from the other areas (that we don’t want to hide).

To do that, go to the Advance tab of all the relevant sections that are part of the dropdown list, and populate them all with the same class, for example, hideOnPageLoad.

Then, use the code below:

<script>
(function ($) {
$(document).ready(function () {
  $('.hideOnPageLoad').hide();	
  $('#wpPluginsList').change(function() {
    $('.hideOnPageLoad').hide();
    $selectedValue = $(this).val();
    $('#'+$selectedValue).toggle();
  });
})
})(jQuery);
</script>

Save the changes once again and test the drawdown feature to ensure it’s working as expected.

Neat right? How about combining both methods? Show the section and scroll to it.

Combine Both Methods Into One

Each of the codes above had its purpose, one was to scroll, and the second was to show.

We will combine both codes this time, so choosing a value from the drop-down list will display the sections and scroll us to it.

Please remember to follow the method above and assign the same class to all desired elements.

<script>
(function ($) {
$(document).ready(function () {
  $('.hideOnPageLoad').hide();	
  $('#wpPluginsList').change(function() {
    $('.hideOnPageLoad').hide();
    $selectedValue = $(this).val();
    $('#'+$selectedValue).toggle();	
    $('html, body').animate({
        scrollTop: $('#'+$selectedValue).offset().top - 25
    },500);
  });
})
})(jQuery);
</script>

When finished, the code’s final behavior will display and scroll to the selected element.

Conclusion

This article showed you how to create a dropdown menu with Elementor by using HTML and JavaScript.

Although Elementor doesn’t have a native dropdown widget, we could still achieve it with some code.

Leave us a comment and tell us if you have any questions about the process.

The post How to Create a Dropdown List Menu in Elementor appeared first on PluginsForWP.

Whether it’s codes, links, or simple text, the copy to the clipboard button will easily copy specific content to the user’s clipboard for future use.

In this article, you’ll learn how to create a copy to the clipboard button in WordPress.

Why Copy to Clipboard?

There are many reasons why to create a copy to clipboard button and here are only some of them:

• Codes – when implementing codes in your articles, it will benefit your readers to copy the code with a click rather than highlighting it. That will ensure the visitor copies the entire code without errors.
• Links – affiliate links are a significant income source for many bloggers and website owners. Allowing your visitors to copy your affiliated links will improve your revenue in the long run.
• Content share – often, when visitors enjoy your content, they would like to share it on their social channels. Copying your exact content will increase your website exposure and drive more traffic.

Regardless of the reason, providing your visitors the option to copy the content to the clipboard help you and them simultaneously.

Now that we know the benefits let’s move on and learn how to do it.

How to Create Copy to Clipboard Button

In this article, I’ll show you three methods to copy the content to a clipboard with a button click. The first way is by using a WordPress plugin, the second way is with JavaScript, and the last method is by using Elementor.

Choose your preferred way based on your level and understanding of WordPress.

Let’s start with the first way: copying to the clipboard using a plugin.

Copy to Clipboard with a Plugin

Using a plugin is the easiest way to extend WordPress functionality. There are plugins for everything and also to copy text to the clipboard.

First, navigate to Plugins -> Add New and search for the copy anything to clipboard plugin.

Once you activate the plugin, you’ll be able to add the content that needs to be copied by using a shortcode or the <pre> tag.

Edit one of your website’s pages and add a shortcode block.

Inside the block, enter the shortcode below. Notice that the text attribute will display the text and the content attribute is the text that will be copied.

[copy text="Click Me" content="This is the content that will be copied"]

Once published, visit the page and test the button. Click on the content and verify that you copied the right content.

If you want to display codes in your tutorials, use the Gutenberg code block instead of the shortcode block.

The code block will automatically add the copy to the clipboard button to the snippet for your visitors’ convenience.

Once again, click on the copy text and verify that the right content was copied to the clipboard.

Using a plugin is a simple way to achieve this task. However, it’s not the only way. Move on to the next section and learn how to copy text with JavaScript.

Copy to Clipboard with JavaScript

If you don’t want to install a dedicated plugin to add the copy content functionality, you’ll be happy to find out that you can get the same results with JavaScript.

Instead of coding our JavaScript code, we will use the external clipboard JS library to simplify the process.

First, we will need to include the library and load it with our theme, and second, we will need to create the HTML elements to copy the content.

To include the library inside your WordPress theme, navigate to Appearance -> Theme Editor and click on the header.php file of your child theme.

If you don’t have a child theme yet, make sure to create one after reading our article on creating a child theme.

Tip: please backup your website before editing core files.

Then, paste this code just before the </head> closing tag inside the header.php file and click publish:

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

Alternatively, you can call the JS library from a different source instead of the one provided above.

Now, you need to instantiate it by passing a DOM selector, HTML element, or list of HTML elements.

Passing the elements on every page is not practical. Instead, we can instantiate it by bypassing the aspects inside the footer template to be included on all pages.

Navigate to Appearance -> Theme Editor and open the footer.php file of your child theme.

Now, paste the code below before the closing </body> tag and save the changes.

    <script>
      var btns = document.querySelectorAll('button');
      var clipboard = new ClipboardJS(btns);

      clipboard.on('success', function (e) {
        console.log(e);
      });

      clipboard.on('error', function (e) {
        console.log(e);
      });
    </script>

Once published, move on and add the copy to clipboard elements into your desired pages.

The copy to the clipboard is paired elements that first include the text that needs to be copied and, second, the button to be clicked on.

Paste this code inside your page while using the editor view:

<p id="foo">This is the text to be copied</p>

<button class="btn" data-clipboard-target="#foo">This it the copy button's text</button>

Please note that the data-clipboard-target attribute of the button should match the ID of the paragraph above it.

All you have left is to replace the provided text with your desired one and add some CSS to style it better.

Although using JavaScript or a plugin is pretty easy to copy text to a clipboard, you may be looking for an easier way when using a page builder such as Elementor.

Copy to Clipboard with Elementor

Elementor is considered the best page builder plugin for WordPress because of its unique widgets and extensions.

Dynamicoo is one of the most valuable libraries that will add tons of new widgets in addition to the default ones. You guessed it right, then copying to clipboard widget is one theme.

You can download dynamicoo from the official website for the total price or from us for only $4.99.

Once you have downloaded the plugin, navigate to Plugins -> Add New -> Upload Plugin, and upload the zip file you downloaded.

After activating the plugin, a new set of cool widgets was added to your Elementor editor screen. Please search for the Copy to Clipboard widget and drag it to your desired location.

Inside the widget screen, you’ll have a button and content tabs under the content tab.

By default, the copy button will be an icon. You can keep it that way or expand the tab to add a custom text instead.

Under the content tab, choose the content type between text, text area, and code. If you enter content and can’t see it on the screen, enable the Visible value option to on.

When using the text area or code options, you can change the copy button to absolute and position it inside the text box.

Navigate to the Style tab and change the button’s position from static to absolute.

When done, publish the changes and verify that it’s working as expected.

Conclusion

In this article, you learned how to copy the content to the clipboard in three different ways. The three methods used are a plugin, adding a JavaScript code, or a page builder extension.

Please leave us a message and let us know which methods you chose to achieve this task.

The post How to Add Copy to Clipboard Button in WordPress appeared first on PluginsForWP.

This article will teach you how to add JavaScript to Elementor in two ways.

The first way is by using the default HTML widget of Elementor, and the second is by installing an extension called Essential Addons.

Why Adding Scripts to Elementor?

When using WordPress, often, you’ll find the need to use custom JavaScript or jQuery. One example can be a Google Analytics tracking code.

Although there are great Google Analytics plugins for that, many website owners prefer to use small scripts instead of installing a plugin.

Using the site kit plugin to inject different scripts is possible, but we can also use the script if we know where to paste it.

Knowing how to use scripts with Elementor is essential because you will need to use it at some point.

Add JavaScript to Elementor

Whether you want to add JavaScript or jQuery, the process is identical, and we can approach it in two different ways.

• With the HTML widget.
• With a plugin.

In this article, we will explore both ways. Let’s start with the first one by using the HTML widget.

Method #1: Add JavaScript with the HTML Widget

Using the HTML widget is my preferred method to add scripts because it’s a default feature of Elementor. You are not required to install any additional plugins.

First, navigate to the page you want to edit and click on Edit with Elementor.

Then, inside the Elementor screen, drag the HTML widget to your desired section.

Next, paste the JavaScript or jQuery script inside the widget editor and click update.

When using the HTML widget, you’ll need to wrap the function inside <script> tags similar to the Gutenberg text editor.

Once updated, revisit the page and verify that the script is executing as expected.

Alternatively, using the Essential Addons plugin, you can inject scripts to any page with their built-in feature.

Method #2: Add Scripts with a Plugin

The Essential Addons plugin for Elementor is a viral plugin used by many.

Although there are many benefits to using this plugin for its extensive widgets library, I don’t recommend you install it only for the scripts option. If you already have it installed on your WordPress website, you can use its benefit to paste scripts on every page.

Navigate to the Essential Addons for Elementor tab inside the WordPress dashboard and into Extensions. By default, the Custom JS option should be turned on, but if it isn’t, activate it.

Once activated, edit your desired page with Elementor and click on the cogwheel icon to open the page settings at the bottom left corner.

Then, click on the Advanced tab and add the scripts into the new Custom JS window.

Unlike the default HTML widget, wrapping the code with <script> tags is unnecessary.

Update the changes and revisit the website to verify that the codes are working as expected.

Essential Addons is only one plugin out of many others that enable you to add JavaScript codes to Elementor. The other plugins are Ultimate Addons and PowerPack.

Conclusion

In this tutorial, you learned how to add scripts to the Elementor page builder in two different ways.

Leave us a comment below and let us know which methods you used.

The post How to Add JavaScript to Elementor (2 Methods) appeared first on PluginsForWP.