Need help with custom coding in wordpress

  • Hi All, I was working with a accordion which I created with HTML, CSS, Javascript. I’m full aware of where to place HTML, CSS code for specific pages or post. But I’m not very sure where to place this JS code snippet.

    few things I’ve tried:
    -> I tried placing JS code in ‘code snippet’ in header, then body & then footer section. But I couldn’t see the accordion functioning properly.
    -> I tried placing JS in functions.php within custom named function.

    Nothing works for me. Please guide me in this. I know I’m being silly but I’m beginner to WP.

    Html: 

    <button class="accordion-para"><img id="accor-img" src="https://latpay.com/wp-content/uploads/2023/10/Group-292.png" />Ecomm</button>
<div class="panell">
  <p><a >Hosted Payment Pages</a><br>

<a >Virtual Terminals</a><br>

<a >Payment Links</a><br>

<a >QR Code Payments</a><br>

<a >Mobile Sites</a><br>

<a >Integrations &amp; Plugins</a><br>

<a >One-Click Payments</a></p>
</div>

<button class="accordion-para"><img id="accor-img" src="https://latpay.com/wp-content/uploads/2023/10/Group-288.png" />In-store</button>
<div class="panell">
  <p><a >Terminals</a><br>

<a >mPOS</a><br>

<a >Virtual Terminals</a><br>

<a >Go Payments App</a></p>
</div>

<button class="accordion-para"><img id="accor-img" src="https://latpay.com/wp-content/uploads/2023/10/Group-290.png" />A winning combination of both</button>
<div class="panell">
  <p>Ask us about an omnichannel approach for online and in-store. Send us an email at [email protected] and we’ll be in contact with more information.</p>
</div>

    CSS:

    #accor-img{
  float: left;
  padding-right: 40px;
  }

.accordion-para {
  background-color: #fff;
  color: #253370;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border-top: 1px solid #ccdced;
  border-bottom: 1px solid #ccdced;
  border-left: none;
  border-right: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  font-weight: bolder;
  transition: 0.4s;
  line-height: 2px;
}

.active, {
  background-color: #ccc;
}

.accordion-para:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panell {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

    JS:

    <script>
var acc = document.getElementsByClassName("accordion-para");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi pgdev,

    I understand your concern regarding the integration of your accordion, which you’ve developed using HTML, CSS, and JavaScript, into your WordPress site. To ensure smooth functionality, let’s proceed with the following steps to properly enqueue the JavaScript code within the WordPress environment. I have two solutions for where and how you can put your JavaScript code.

    Enqueue the Script in Functions.php

    1. Open your theme’s functions.php file.
    2. Inside the functions.php file, add the following code:

    function enqueue_accordion_script() { wp_enqueue_script('accordion-script', get_template_directory_uri() . '/js/accordion-script.js', array('jquery'), null, true); } add_action('wp_enqueue_scripts', 'enqueue_accordion_script');

    1. Save the functions.php file.
    2. Create a folder called “js” in your theme directory.
    3. Inside the “js” folder, create a new file named accordion-script.js and copy your JavaScript code into this file.
    4. Save the accordion-script.js file.

    This method ensures that your script is properly enqueued and loaded in the footer of your WordPress site.

    Use a Custom HTML Block

    If you’re working with the WordPress block editor, you can also add the script directly to a specific page or post by using a Custom HTML block:

    1. Edit the page or post where you want to add the accordion.
    2. Add a new Custom HTML block.
    3. Copy and paste your JavaScript code into the Custom HTML block.
    4. Update or publish the page.

    If this doesnt work, please send me a screenshot of any errors you might have.

    Kind regards,

    Alexander

Viewing 1 replies (of 1 total)
  • The topic ‘Need help with custom coding in wordpress’ is closed to new replies.