- This topic has 7 replies, 4 voices, and was last updated 4 years, 3 months ago by
David.
-
AuthorPosts
-
September 7, 2021 at 11:18 pm #1922502
Jaime Hernando
Hello Elvin, I need your help please I am using this information to create an accordion, it worked fine, but some time later it stopped working on mobiles, I don’t know what happens and how to fix it, I have removed and placed it again, but it does not work.
I list all the code that I am using that was taken from the forum. # 1194173
All the Css is in the customizer, since I removed it from the stylesheet to review it.
CSS
.accordion-container {
display: none;
padding: 20px;
}
.accordion-container.toggle-open {
display: block;
}
.accordion-toggle {
cursor: pointer;
background-color: #f9f9f9;
}
h4.accordion-toggle {
font-size: 14px;
padding: 10px 20px;
margin-top: 10px;
margin-bottom: 0;
}.accordion-toggle:after {
content: ‘\002B’;
color: #777;
font-weight: bold;
float: right;
margin-right: 20px;
}h4.accordion-toggle.toggle-open:after {
content: “\2212”;
}HTML
<h4 class=”accordion-toggle”>Add a Heading</h4><p>Insert your contet</p>jS a new Element: Hook = wp_footer
<script type=”text/javascript”>
jQuery(document).ready(function($) {
$(‘.accordion-toggle’).click(function(){//Expand or collapse this panel
$(this).next().slideToggle(‘fast’);//Hide the other panels
$(“.accordion-container”).not($(this).next()).slideUp(‘fast’);//Switch toggle
$(‘.accordion-toggle.toggle-open’).not(this).removeClass(‘toggle-open’);
$(this).toggleClass(‘toggle-open’);
});
});
</script>Create a new Snippit
add_action( ‘wp_enqueue_scripts’, ‘tu_load_jquery’ );
function tu_load_jquery() {
wp_enqueue_script( ‘jquery’ );
}Thank you so much.
September 7, 2021 at 11:25 pm #1922507Elvin
StaffCustomer SupportHi there,
Can you link us to a sample page where the accordion is placed? To check why it isn’t working.
September 7, 2021 at 11:34 pm #1922513Jaime Hernando
Sure, it works on desktop but not on mobile, there are three pages where it does not work
https://www.marketingmiempresa.com/
https://www.marketingmiempresa.com/posicionamiento-seo-medellin/
https://www.marketingmiempresa.com/administracion-redes-sociales/September 8, 2021 at 12:28 am #1922550Elvin
StaffCustomer SupportThe accordion doesn’t work on my end for either desktop or mobile.
And I see this error – https://share.getcloudapp.com/qGuJxp6P – which is most likely related because you’re using jQuery library.
On the script, what happens when you replace the word “jQuery” with
$?Let us know how it goes.
September 8, 2021 at 1:13 am #1922583Jaime Hernando
Thank you very much; you’ve been very helpful.
I found the problem and it was solved.
September 8, 2021 at 6:39 pm #1923617Elvin
StaffCustomer SupportNice one. Thanks for letting us know. Glad you got it sorted. 😀
February 4, 2022 at 8:00 am #2105353Ian
Hi, I’ve been trying to solve the same problem.
I have added the script to a new code snippet, and it doesn’t seem to read the code.
For example, I put the script directly into functions.php (I know, strongly not recommended), and I can get the accordion to work. I place the script into code snippet and it doesn’t do anything. How should I set the snippet?
February 4, 2022 at 9:58 am #2105477David
StaffCustomer SupportHi there,
can you raise a new topic where you can share a link to your site – we can then take a look to see if there are any obvious issues.
-
AuthorPosts
- You must be logged in to reply to this topic.