Discover a striking MaterializeCSS collapsible designed to showcase stunning images

I am currently working with MaterializeCSS and I have a question about adding an image within the "collapsible-body" section of a Collapsible element. I've tried to add it but unfortunately, it doesn't seem to display. Is there a way to achieve this using CSS or JavaScript?

Below is the code I am working with:

<ul class="collapsible">
  <li>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
    <div class="collapsible-body">
      <p>Lorem ipsum dolor sit amet.</p>
      <img href="https://materializecss.com/images/yuna.jpg"><!-- Example image -->
    </div>
  </li>
</ul>

In addition, here is the JavaScript code to initialize the collapsible:

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

Answer №1

Make sure to use the SRC attribute for images, not HREF:

<ul class="collapsible">
  <li>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
    <div class="collapsible-body">
      <p>Always remember to specify the image source.</p>
      <img src="https://materializecss.com/images/yuna.jpg"><!-- This is just an example image -->
    </div>
  </li>
</ul>

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

Is there a way in Jquery to remove a class?

I have created a code for a single page website where clicking on the toggle bar will display the 'ul' and clicking on one of the 'a' links will take me to the corresponding div. I want the toggle bar to automatically close back after c ...

Updating the background image of a React app according to each component

After researching extensively and attempting various solutions, I am still struggling to make my app function correctly. My goal is to display a different background image depending on which component is being rendered on the screen. The app is built using ...

Error message: "An issue occurred: Unable to access undefined properties (specifically, borderRadius) in MUI react."

I recently created a navigation bar with an integrated search bar component. The styling for my search component was done using MUI styled from @emotion/styled in MUI library, where I applied a borderRadius: theme.shape.borderRadius. However, I encountere ...

How can I ensure that my CSS code functions seamlessly across all versions of Internet Explorer from IE6 to the latest release?

I need a solution for getting this CSS code to function properly across all versions of Internet Explorer, from IE6 to the most recent version. body:first-child * { margin-top:0 !important; } body:last-child * { margin-bottom:0 !important; } Any ...

Delete items within the first 10 minutes of shutting it down

Is there a way to temporarily remove a newsletter element for 10 minutes after closing it on a webpage? The idea is that once the panel is closed, it should stay hidden even if the page is refreshed within that timeframe. I was considering using local stor ...

I utilized the "data-target" attribute to ensure the active link retains its style. Is there a way to preserve the style when navigating away from an active link?

Can someone assist me with this re-upload? I need help tweaking my code to maintain style when navigating between pages using the "data-target" attribute. Currently, the style is being lost when moving from the original link (e.g., "link/sub01.html") to a ...

Maximizing performance with internal Bootstrap?

An interesting concept to consider is that the fastest website could actually be an empty webpage. Each additional piece of data added compromises performance, yet it's the server's responsibility to send all the code to the client. When using ...

Locate the final flexbox in the initial row and the initial flexbox in the concluding row

How can I identify the last element of the first row and the first element of the last row in the given code to make it round from all corners? It should be noted that the column number will vary as well as the last element of the first row and first eleme ...

Tips for deciding on the appropriate CSS for an Angular 6 navbar component

I am currently working on an angular 6 application where users are assigned different roles that require distinct styling. Role 1 uses Stylesheet 1, while Role 2 uses Stylesheet 2. The Navbar component is a crucial part of the overall layout structure of ...

Resolved plugin issue through CSS adjustments

Take a look at this template 1) After referring to the above template, I developed a fixed plugin using JavaScript. 2) Clicking the icon will trigger the opening of a card. 3) Within the card, I designed a form using mdb bootstrap. Everything seems to ...

Problems arising from positioning elements with CSS and organizing list items

I've been working on creating a navigation sidebar using Angular and Bootstrap, but I'm having trouble getting my navigation items to display correctly. APP Component HTML <div class="container-fluid"> <div class="row" id="header"&g ...

faulty lineup in jquery picture switching feature

I've been working on a website that features a jumbotron with images that transition. I've searched online for solutions, but have come up empty. I know the answer is probably simple, but I just can't seem to figure it out right now. The is ...

What is causing the unusual behavior of z-index in this specific scenario?

I have a good understanding of z-index and decided to practice with it by writing the following code: *{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; di ...

Troubleshooting the onExited callback issue with Popover component in Material UI

<Popover key={element.name} classes={{ paper: classes.paper }} open={open} anchorEl={this.myRef.current} anchorOrigin={{ vertical: ' ...

JS causes the navigator to malfunction

UPDATE: Greetings! I have developed a navigation bar that loads various pages into a specific div. Here is the source code for the navigation bar: <div id="navBar"> <ul> <li><a href="#" onClick="document.getElementById('bott ...

Enhancing User Experience with AJAX-loaded Navigation Bar

I have set up the following structure: A main-page.php consisting of: 1) A header 2) A navigation bar 3) Content (loaded inside a <div id="dynamic-content"></div>) 4) Footer The navigation bar contains various options (e.g. About Us, Cont ...

The misaligned navigation bar and distortion on mobile devices are causing issues with the website's layout

The logo, search bar, cart, login, and sign up are not aligned on the same line. When I try to view it on mobile, distortion occurs. The search bar and other elements get messed up. In mobile view, nothing happens when clicking on the menu collapse butt ...

Guide to triggering a popover from within another popover using jQuery

Currently, I have a situation where a popover is triggered by clicking on a button. The goal is to trigger another popover from the first popover by clicking on some content within it. If you'd like to see a demonstration, check out this JSFiddle lin ...

Create a visual representation by converting it into an HTML table

Check out my JSFiddle here: http://jsfiddle.net/0r16e802/4/ I'm attempting to display an image as an HTML table, but I'm facing two major issues with my algorithm: Only the first image is loaded in the first row and I need to figure out how to ...

Comparing hardware-accelerated CSS3 animations, transitions, and jQuery animate for mobile devices

While developing my app using PhoneGap and jQuery, I encountered a dilemma regarding animations. Initially, I relied on what I knew best - jQuery animate - to create smooth movements. However, discussions about hardware acceleration caught my attention. ...