Discover Foundation 6 Accordion Panels designed exclusively for Medium to Large Screens

I am trying to automatically open a Foundation 6 accordion using JavaScript when the window size is larger than 640px. Despite researching various posts on the Foundation forum and StackOverflow related to accordions, I have not been successful in resolving this issue.

Below is my most recent code: http://codepen.io/rogetmone/pen/VaJNVw

$(document).foundation();
$(document).ready(function() {
  var windowWidth = $(window).width();
  if (windowWidth > 640) {
    $('#blackberry-recipes').addClass('is-active');
  }
});

I would greatly appreciate any assistance with this matter!

javascriptzurb-foundationaccordion

Answer №1

Applying the class is-visible does not change the visibility of the content as expected. To make the accordion section visible, you can simulate a click event on the child link (a) within the #blackberry-recipes div:

$(document).foundation();
$(document).ready(function() {
  var windowWidth = $(window).width();
  if (windowWidth > 640) {
    console.log('hello');
    $('#blackberry-recipes > a').trigger('click');
  }
});

This approach can be applied to any other accordion item as well.

Check out the updated CodePen here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing a function in React JS triggered by an event

Can someone help me figure out how to properly call a function from a React component within the same class? I am working with create-react-app. SomeFunction(){ return true; } handleClick(e){ SomeFunction(); // This part doesn't w ...

javascriptreactjscreate-react-app

What is the process for adjusting the width of an element using JavaScript?

I have a unique bar with one half red and the other green. I am trying to subtract 1vw from the width of the red section. Unfortunately, using style.width is not yielding the desired result. See below for the code snippet I am currently using: //FIGHT do ...

javascriptcsswidth

Just beginning my journey with coding and came across this error message: "Encountered Uncaught TypeError: Cannot read property 'value' of null"

As a newcomer to the world of coding, I am excited about working on a side project that allows me to practice what I am learning in my courses. My project so far is a temperature calculator that incorporates basic HTML and JS concepts. My goal is to improv ...

javascripthtml

Utilizing Axios to filter response.data in an API request

Looking to retrieve the latest 8 products based on their date? Take a look at the code snippet below: const newestProducts= []; axios.get("http://localhost:3003/products").then(response => { let products = response.data.sort(fu ...

javascriptarraysjsonapiaxios

Iterate through the collection to retrieve the value associated with a specific key

In the JSON response I have received, I am trying to extract the value of "fees" corresponding to "detailComponent" with the identifier "FULL_FEE". However, instead of retrieving the desired value, the loop seems to be fetching the last value associated wi ...

javascriptjquery

Executing a JavaScript function in ASP.NET after a button click has been completed

Here is an ASP.NET button: <asp:Button ID="okButton" runat="server" Text="Okay" OnClick="okButton_Click" /> This is the okButton_Click function: protected void okButton_Click(object sender, EventArgs e){ //perform tasks here } There is also a Ja ...

javascriptc#asp.net

Troubleshooting Date Problems in Angular

When using the HTML5 date picker, I have encountered an issue where after choosing a date, the ng-model displays an older date instead of the current one selected. <input type="date" ng-model="dateModel" /> For example, when selecting the current d ...

javascripthtmlangularjsdatetime

Toggle Form Section Visibility

I am working on a table with five rows that have upload buttons. Each time I submit a row, the page refreshes, but I want to hide all but one row at a time. When the first submit button is clicked, it should show the next row and hide the previous ones. Th ...

javascriptphpjqueryhtml

Tips for executing gulp tasks in the command line

As a newcomer to Gulp, I've encountered an issue with executing a task named task1 in my gulp.js file. When I enter "gulp task1" in the command line, it opens the gulp.js file in Brackets editor instead of running the task as expected. Can anyone offe ...

javascriptgulp

Why is it beneficial to include multiple script blocks on a webpage?

Note: After reviewing the feedback from Andrew Moore, it seems that this question is a duplicate of Two separate script tags for Google Analytics?. Therefore, there may be merit in removing this question to prevent clutter on Stack Overflow. However, if th ...

javascriptgoogle-analytics

Nested foreign array elements found within an object's array structure

I have a collection of skills, here they are: var my_skills = ['problem solving', 'collaboration', 'public speaking']; There is also an object array in the mix: var jobs[0] = {title: "developer", skills:[my_skills[0], my_sk ...

javascriptarraysobject

Using query parameters in Angular to interact with APIs

One scenario involves a child component passing form field data to a parent component after a button press. The challenge arises when needing to pass these fields as query parameters to an API endpoint API GET /valuation/, where approximately 20 optional p ...

javascriptangularangularjstypescript

Best practices for selecting checkboxes and transferring values to another page in PHP/HTML

Apologies for my lack of experience in PHP. I am in the process of creating a project without any knowledge of PHP. I have set up a database with a list of users and can display users based on specific information through a search. Each search query has a ...

javascriptphpjqueryhtml

Having trouble sending a function as a prop to a child component in React

Something odd is happening, I'm confident that the syntax is correct, but an error keeps popping up: Error: chooseMessage is not a function // MAIN COMPONENT import React, { useState } from 'react' export default function LayoutMain(prop ...

javascriptreactjsreact-propsreact-functional-component

Verification message appears once the SQL database has provided the necessary information to the data table

function alertbox() { var mode = document.getElementById('<%= hdnMode.ClientID %>').value; if (mode == "EDIT") return false; if (confirm("Is the same data present against that ID?") == true) { document.getElemen ...

c#javascriptasp.net.net

What is the best way to ensure my arrow text remains properly positioned when using fullpage.js?

Seeking guidance from the web development community. I am currently working on a client's website that utilizes fullpage.js and encountering a persistent issue. On slide1 of the website, I am struggling to display the correct text next to the arrows. ...

javascriptjqueryhtmlcssfullpage.js

Exploring the wonders of LoopBack querying

Discovering loopback has been an enlightening experience for me. However, as I delve deeper into its functionalities, I've stumbled upon something unexpected. I noticed that when executing queries, such as using the updateAll method, if a parameter i ...

javascriptloopbackjs

What is the best way to eliminate the alert message "autoprefixer: Greetings, time traveler. We are now in the era of CSS without prefixes" in Angular 11?

I am currently working with Angular version 11 and I have encountered a warning message that states: Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning "autoprefixer: Greetings, time traveler. We are now in the era of prefix-le ...

javascriptcssangularautoprefixer

Error: The JSON in app.js is invalid due to the unexpected token "C" at position 0

When I try to run this code snippet, I sometimes encounter an error message that says: SyntaxError: Unexpected token C in JSON at position 0. function fetchData(user_country) { fetch(`https://covid19-monitor-pro.p.rapidapi.com/coronavirus/cases_by_day ...

javascripthtmlfetch-api

Utilizing JSDoc annotations for type safety in VSCode with ESLint configuration for TypeScript declarations import

Is there a way to configure VSCode to perform syntax checking on .eslintrc.js and provide autocomplete functionality? I have managed to set up a structure for a JavaScript configuration file with a custom syntax for my application, but the same approach do ...

javascripttypescriptvisual-studio-codeeslintjsdoc