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

Best practices for handling AJAX GET and POST requests in EmberJS

EmberJS has captured my interest and I am thoroughly enjoying diving into it. Although there is a learning curve, I truly believe in the meaningful principles it stands for. I am curious about the process of making GET and POST calls in Ember JS. While I ...

javascriptjqueryajaxember.jsember-model

I am attempting to adjust the CSS code so that it does not shrink when clicked on. How can I prevent this from happening?

Here is the element I am attempting to modify. I attempted &:active { flex:7;} but upon releasing the left click button, it reverted back to its original size. I was aiming for something similar to this <h1>Gallery</h1> < ...

htmlcssanimation

What is the best way to load an ExtJS combobox with a JSON object that includes an array

After retrieving the following JSON from the backend: { "scripts": [ "actions/rss", "actions/db/initDb", "actions/utils/MyFile", "actions/utils/Valid" ], "success": true } The JSON data is stored as follows: t ...

javascriptajaxjsonextjsextjs3

Display images quickly when the mouse is hovering

I am looking to create a function that will flash images when the mouse hovers over them and then stop flashing when the mouse moves away. However, I am experiencing an issue where "flash_imgs" is being called every time there is a mouse movement over the ...

jqueryanimationsetinterval

Sliding an image from the left side to the right, and then repeating the movement from left to right

I am currently working on a CSS effect for some images. My goal is to have an image appear from the left side, move towards the right side, then reappear from the left and repeat this cycle. I managed to achieve this using the code below: @keyframes sli ...

javascripthtmlcsscss-animations

Using JSON parsing to dynamically create classes with preloaded background images

Today, I successfully deployed my browser game using MVC4 to my website for the first time. I am currently navigating through the differences between running the site off of localhost and running it from the actual website. My process involves loading all ...

javascriptjqueryjsonimagepreload

Tips for disabling autofocus on textarea when it is initially created in Internet Explorer browser

By clicking a button, I can generate a new <textarea></textarea>. However, in Internet Explorer, the cursor automatically moves to the newly created text area. Is there a way to prevent this from happening? ...

javascriptjqueryhtmlcss

Learning how to use Express.js to post and showcase comments in an HTML page with the help of Sqlite and Mustache templates

I am facing a persistent issue while trying to post new comments to the HTML in my forum app. Despite receiving various suggestions, I have been struggling to find a solution for quite some time now. Within the comments table, each comment includes attrib ...

javascripthtmlnode.jssqliteexpress

Having trouble getting the Underscore.js template to function correctly with JSON data

Hello there! I have some PHP code $arr = array("title"=>"sample Title", "body"=>"151200"); echo json_encode($arr); The data output is: {"title":"test Title","body":"151200"} When I attempt to use this JSON output in Underscore, I encounte ...

javascriptphpjsonunderscore.js

How to dynamically change the position of an input field within a form using JavaScript and jQuery

I have a form displayed on my website that looks like this: input a input b input c I am wondering if it is achievable to rearrange the order of inputs using jQuery, like so: input a input c input b However, it is important that the data is still ...

javascriptjqueryhtmlforms

Generate a dropdown menu with dynamic options populated from an API by adding an input type select element dynamically

Greetings! I am working on designing a decision tree that dynamically generates options based on user selections and API responses. When a user chooses a reason option, the corresponding reasons are fetched from the API and displayed in a select dropdown. ...

javascriptvue.js

Swapping out one variable for another

After tweaking my code a bit, I'm still struggling to get it right. User input: !change Hi var A = "Hello" if (msg.content.includes ('!change')) { A = msg.content.replace('!change ', ''); } msg.send(A); //the change ...

javascriptnode.js

Tips for displaying a pre-filter loading message using AngularJS

Is there a way to display a "Loading Message" prior to the filtered data being returned when using AngularJS for filtering? The filter process is quick, so displaying the message before returning the filtered data is not feasible. Here is an example of the ...

javascriptangularjsangular-filters

Certain individuals are experiencing difficulties accessing my Google application

I have created a node.js application with a Google login feature using the following packages: "passport": "^0.3.2" "passport-google-oauth": "^1.0.0" However, I am facing an issue where only a few users are able to access this feature. Below is the code ...

javascriptnode.jspassport.jsgoogle-signin

Tips on resizing images in CSS with accompanying text to prevent overlap

In my school project, I am using cloud9. When utilizing the live preview in a small window pane, my images appear correctly sized. However, upon maximizing my screen browser, the images stack on top of each other and their dimensions increase. My ideal l ...

htmlcssimage

Is it possible to utilize the output of a function nested within a method in a different method?

I am currently facing a challenge with my constructor function. It is supposed to return several methods, but I'm having trouble using the value from this section of code: var info = JSON.parse(xhr.responseText); Specifically, I can't figure ou ...

javascriptjsonajaxconstructor

What is causing the loss of context for 'this' in the latest Angular 1.5 components?

Encountering a strange issue with the new components. Previously, in version 1.4 directive, we had this block of code... (function () { 'use strict'; angular.module('app.board').directive('dcCb', dcClipboardCopy); funct ...

javascriptangularjsthis

Problems with Displaying Facebook Ads on Mobile Web

Currently, I am incorporating Facebook Audience Network (MobileWeb-beta) for advertisements on my mobile website. However, the 320x50 HTML source code is not displaying the ad across the width of the mobile screen as intended; instead, it appears smaller ( ...

htmlfacebookfacebook-ads-apiiphone-web-appfacebook-audience-network

Guide to integrating Google Maps JS API into a React application without relying on third-party libraries

I'm currently grappling with the concept of integrating external APIs in React and am interested in using Google Maps' API to showcase a map within a child component. My goal is to gain insight into how this can be done without relying on any ext ...

javascriptajaxgoogle-mapsreactjsgoogle-maps-api-3

Duplicating an Angular 2 reactive form without retaining the original reference

I am facing a challenge with my reactive form where I need to round certain values when the form is submitted, without altering their appearance on the page. To achieve this, I devised a method that generates a new form, rounds the specified values, and t ...

javascriptangularforms