Tips for starting JavaScript on Materialize 1.0

I need some help with initializing a materialize component using JavaScript. My understanding of JS is lacking, but I have had success using jQuery. Specifically, I am looking to use the Collapsible component. 

<ul class="collapsible">
<li>
  <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
  <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
  <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
  <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
  <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
  <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>

To initialize the collapsible:

// JS
var elem = document.querySelector('.collapsible');
var instance = new M.Collapsible(elem, options);

  // Or with jQuery

  $(document).ready(function(){
    $('.collapsible').collapsible();
  });

My code

javascripthtmlcssmaterialize

Answer №1

Give this a try:

<!DOCTYPE>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/css/materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/js/materialize.min.js"></script>

</head>
<script>
     var elem = document.querySelector('.collapsible');
  var instance = new M.Collapsible(elem, {
    // inDuration: 1000,
    // outDuration: 1000
  });
</script>
<body>

<ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

</body>
</html>

See the live demo here on CodePen: https://codepen.io/Astha25/pen/OzJpbQ

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

Completion of TypeScript code is not working as expected, the variable that is dependent upon is not

Looking for assistance with creating code completion in TypeScript. Variable.Append1 Variable.Append2 Variable.Append3 I have defined the following class: class Variable { Append1(name: string){ if (name == undefined) ...

javascripttypescriptcode-completion

What is the best way to ensure my button displays the complete description of a single country after showcasing all the countries?

I have designed a search feature for countries and I am looking to add a button next to the country names that will trigger one of my components responsible for displaying detailed information about the country. Currently, the details are shown only when t ...

javascriptjsonreactjs

Conceal specific pages within the DataTable without deleting them

Currently, I am facing an issue where the dataTable paginates and removes the DOM pages along with the data. My goal is to extract all the data from the dataTable and convert it to JSON without losing access to the DOM when pagination occurs. I want to m ...

javascriptjqueryhtmljsondatatables

What is the process for testing promise functions that contain an internal promise using Jasmine in an Angular environment?

In my service function, here's how it looks: asyncGetStuff: (id) -> stuff = [] @asyncGetItem id .then (item) -> #parse some data stuff.push data return stuff Now I am trying to verify the contents of 'stuff': ...

javascriptangularjsunit-testingjasmine

Having trouble with the animate() function not working properly?

I have been working on the following code snippet: var isOn = false; $('.switch').on("click",function(){ if (isOn){ $('.toggle').animate({ left:"18px" },10,"linear", { complete: function(){ $(&ap ...

javascriptjquerycss

Removing a Dom element using stage.removeChild( )

When the number 6 is typed and entered into the game, the function correct() in the code snippet below determines what action to take. I would like to remove the DOM element gg (the equation 3+3=input) from the stage after typing 6 and pressing enter. How ...

javascripthtmldomcanvasjsfiddle

What is the best way to refresh a partial view using the Jquery .load() function?

On my page, there is a partial view within the "Attachments" div that I need to reload. I've been trying to achieve this by using the following command: $('#attachments').load('@Url.Action("Attachments" "Transactions",new {id=1297})&a ...

javascriptc#jqueryasp.netasp.net-mvc

Modifying the color of the chosen item - ion-select

Can anyone help me with changing the color of the selected item on ion-select? I've tried several solutions without success. Any suggestions? Documentation: https://ionicframework.com/docs/api/select I attempted to use the color property, but it did ...

htmlcssangulartypescriptionic-framework

How to Customize the Drawer Color in Material-UI v5

I'm currently using MUI v5 in my project and I am encountering some challenges while attempting to style a Drawer component with a black background color. As this update is relatively new, I have not been able to find much information on customizing t ...

cssreactjsmaterial-uimaterial-design

Is there a reason why using margin:auto doesn't work for vertically centering items?

I'm having trouble understanding how margin auto functions. In the scenario I'm dealing with, I have a parent div and a child div nested within it, both with specified widths and heights. I attempted to use margin auto in order to center the inne ...

htmlcssmargin

Transforming JSON information for Google chart data table

I am currently working on converting JSON data into a suitable format for a Google Chart visualization: var jsonData = {"Battery Voltage, (A)": {"2017-11-11T00:00:00.000Z":12.3, "2017-11-11T00:01:00.000Z":12.35, ...

javascriptjsongoogle-visualization

tilted container with outline

One challenge I'm facing is with a code that involves 6 slanted divs. I would like to add a black border to only the center Title 2 div. However, when I apply the border, it only shows on the top and bottom, not on the left and right sides. .title ...

htmlcssbootstrap-4

Instructions on converting a SQL expression to Sequelize

Could someone assist with converting this to sequelize? CREATE TABLE "fundraiserUpdates" ( "updateId" SERIAL, "updateFundraiserId" INTEGER NOT NULL, "updateTitle" TEXT NOT NULL, "updateDescription" TEXT NOT NULL, CONSTRAINT "pk_fundraiser ...

javascriptnode.jspostgresqlsequelize.jsddl

Issues arising from the event target

What is the reason behind this code functioning successfully only when the alert function is called? The color changes after closing the alert box, but if the line with the alert command is commented out, nothing happens. function setLinkColor(el) ...

javascriptjquerycss

Ensure that checkboxes are activated in AngularJS before the ng-model is officially declared

I'm currently working on a web application that utilizes Angular and I'm looking to integrate some checkboxes that are directly linked to database content using ng-repeat. I need an auxiliary array to manage the ng-model, with all checkboxes init ...

javascripthtmlangularjsajaxcheckbox

transmit data retrieved from `getStaticProps` to other static pages in NextJS

While working on my project, I encountered the task of fetching a large JSON dataset from an external API within the getStaticProps function. This dataset needs to be divided into multiple parts and passed as props to numerous static pages (potentially hun ...

javascriptnext.jsstatic-site-generation

Enhance the functionality of the 'validate as true' function

I have an object that resembles the following $scope.object = { Title: 'A title', Status: 'Open', Responsible: 'John Doe', Author: 'Jane Doe', Description: 'lorem ipsum dolor sit' } My aim now i ...

javascriptangularjs

Steps for including a map in a property file for JavaScript parsing

When a checkbox is clicked, a new series of checkboxes will be displayed. The details for these checkboxes are fetched from a database. However, I now need to have certain checkboxes pre-checked based on the user's selection. Since I can't store ...

javascriptjsp

Troubleshoot: Firebase deployment of Vue.js application unable to locate page

I'm currently working on a silly web app with my friends for some laughs. We're using Firebase hosting and Discord OAuth2. The issue arises when attempting to access the "/login" page either by entering it in the URL or clicking "authorize" on th ...

javascriptfirebasevue.jsvue-routerfirebase-hosting

Nest.js: initializing properties from a superclass in a controller

I have a question about unit testing controllers in the Nest.js framework. My issue is that the property from a superclass is not initialized in the controller class when creating a test module. Here is an example of the code I am referring to: export cl ...

javascripttypescripttestingjestjsnestjs