Tips for styling an image and vCard within a Foundation accordion menu

I am working on a project that involves creating a list using an accordion feature to display names of individuals. When a user clicks on a person, I want the dropdown content to show their image and vcard details. How can I structure the content so that the image appears on the right side with the vcard information next to it on the left? I am utilizing the existing Foundation framework for this task. Thank you.

 <div class="accordion-content">

            <img src="http://thumb9.shutterstock.com/display_pic_with_logo/1294/108451796/stock-photo-friendly-male-doctor-at-the-gym-smiling-108451796.jpg" alt="PCP" style="width:304px;height:228px">
            <ul class="vcard">
                <li class="fn">Gaius Baltar</li>
                 <li class="street-address">123 Colonial Ave.</li>
                 <li class="locality">Caprica City</li>
                <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
                 <li class="email"><a href="#"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f196df93909d859083b194889090c819d94df929e9c">[email protected]</a></a></li>
            </ul>
        </div>
javascriptjqueryhtmlcss

Answer №1

According to bigbobr's suggestion, the following code should do the trick.

<img style="width:350px;height:250px;float:left;" src="http://imageexample.com/image.jpg" alt="Example Image">

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

output the array utilizing map function results in undefined

I have an array structured like this: const HeaderData = [ { header: { title: "How you`ll benefit", detail: "We create these goals to assist you in recovering from your recent surgery. Slowly increasing your physica ...

javascriptjsonreactjsreact-native

Obtain image from an external server using AJAX

Our team is currently working on retrieving images from external servers that are cross-origin. While JSONP may not be effective in this case, we are exploring the use of plain AJAX GET requests. One potential workaround involves using iframes to manipulat ...

javascriptajaxbrowsercors

Combining Rxjs map and filter to extract countries and their corresponding states from a JSON dataset

I have a unique dataset in JSON format that includes information about countries and states. For example: { "countries": [ { "id": 1, "name": "United States" }, { "id": 2, "name": "India" }], "states": [ { ...

javascriptjsonangulartypescriptrxjs

Identify when two calendar dates have been modified

Creating a financial report requires the user to select two dates, search_date1 and search_date2, in order for a monthly report to be generated. Initially, I developed a daily report with only one calendar, where I successfully implemented an AJAX script ...

javascriptjqueryajax

Is there a way to clear out input values in a form after some errors are caught and the rest of the data is saved upon resubmission?

Currently, I am in the process of validating my HTML contact form using PHP. To test its functionality, I have tried submitting the form with no data and then attempted again with partial data. While submitting partial data, I noticed that the correct fiel ...

phphtmlforms

After successful sign-in, users will be redirected to the

After mainly working on mobile development, I am now diving into web development. I am currently utilizing firebase.auth() to sign in a user and I'm struggling with how to handle page redirection within my JavaScript/node application. What is the pro ...

javascriptnode.jsexpress

the background image shivering with movement

While experimenting with some animations, I encountered a small issue: When trying to animate a div that has an image as its background, the image appears to shake, especially when expanding and shrinking the div from the center. Is there a way to prevent ...

htmlcssanimationbackground-imagekeyframe

The issue with Node.js arises when attempting to access data within a nested fs.readFile call

This is my initial attempt at a nodejs project and I'm struggling to pinpoint the issue: https://i.sstatic.net/NsI7M.png fs.readFile("/home/shaurya/Desktop/test.txt","utf-8", function(err,filedata1){ fs.readFile(filedata1,"utf-8",function(err, ...

javascriptnode.js

Guide on inserting HTML text box form input into Express route parameter

I'm currently working on implementing a feature that allows users to search through my mongo database using an endpoint structured like this: app.get('/search/:input', function(req, res){ console.log(`get request to: /members/${req.params ...

javascripthtmlnode.jsmongodbexpress

You have encountered an error: Uncaught TypeError - the function (intermediate value).findOne is not defined

Encountering an error when attempting to call the getStocks function from a Vue component. smileCalc: import User from "../models/user.js"; let userID = "62e6d96a51186be0ad2864f9"; let userStocks; async function getUserStocks() { ...

javascriptvue.jstypeerror

React State RefreshIs this rewrite good enough?

Displayed above is an image of an object containing two UI controls stored as this.state.controls. Initially, the state values are set with data received before componentDidMount. Updates to the controls' state values are triggered by an event, which ...

javascriptreactjs

Confirming whether the digit entered in jQuery is a number

My website has a user input field where numbers are expected to be entered. I wanted to find a convenient way to validate the input using jQuery. After some research, I discovered jQuery's built-in function called isDigit. This handy function allows ...

javascriptjqueryvalidation

Arranging various JavaScript arrays

I've been working on a script using the Haversine formula, but I'm running into an issue where it always directs me to the first location in the array, no matter how many times I switch them around. Any suggestions? var locations = new Array( ...

javascriptarrayshtmlgeolocationhaversine

Error: Unable to locate the store in either the context or props due to an invariant violation

In the development process, I encountered an issue with my code regarding storing and retrieving user information. My scenario involves creating a store in Login.js where the username is sent to the store upon user login. Subsequently, in Profile.js, I aim ...

javascriptreactjsreact-nativereduxreact-redux

Trouble mapping an array of objects in ReactJS

I'm encountering an issue where I am unable to map through an array of objects in my component. Although I have used this map method before, it doesn't seem to be working now. Can anyone help me figure out what's going wrong? import React, ...

javascriptreactjs

The module 'NgAutoCompleteModule' was declared unexpectedly by the 'AppModule'. To fix this issue, make sure to add a @Pipe/@Directive/@Component annotation

Currently, I am attempting to integrate an autocomplete feature into my Angular 2/4+ project. Despite trying various libraries, none of them seem to be working correctly. Each one presents me with a similar error message: Unexpected module 'NgAutoCom ...

javascriptangularnpmangular5angular2-template

How to Avoid Duplicating Documents in MongoDB?

I'm currently exploring effective methods to avoid saving duplicate documents in MongoDB. Currently, my form captures the user's URL input. The workflow is as follows: Validate if the user's URL is valid (using dns.lookup). If the use ...

javascriptnode.jsmongodb

"PHP MySQL news error" - An unexpected error occurred

Just incorporated a news system using MySQL/PHP, it functions flawlessly; however, encounters errors when inserting HTML. For instance, inserting a YouTube video results in the addition of / or \ Can someone advise on what changes need to be made in ...

phpmysqlhtml

Variation in `th` & `td` Width in Table

Is it possible to have different widths for th and td, such as 50px for th and 500px for td? To address this issue, I am utilizing datatable. To enable others to help me, here is a simple code snippet: .abc { width: 500px; } .def { width: 50px; } ...

htmlcss

Issues are occurring with the @font-face css for the Futura Bk BT Bok.ttf font file

Is there a way to incorporate the 'Futura Bk BT Bok.ttf' font into my website using the CSS @font-face rule? Here is a snippet of my current CSS: @font-face { font-family: abcd; src:url('Futura Bk BT Bok.ttf') format('true ...

cssfontsfont-face