Update the hover functionality to only trigger on small screens when clicked

Is there a way for the text content to change from appearing on hover of an image to opening with a click in the mobile version?

<div class="program prog-image" style="background-image: url(https://imagevars.gulfnews.com/2019/07/23/Timberwolf_16c1de35555_base.jpg)">
      <div class="more-details"> 
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, voluptates.</li>
          <li>Lorem ipsum dolor sit amet.</li>
        </ul>
      </div>
    </div>

<style>
    .program{
        height: 400px;
        width: 700px;
        position: relative;
    }
    .more-details{
        opacity: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    ul{
        list-style: none;
    }
    .program:hover .more-details{
        opacity: 1;
    }
</style>

I am looking to create an accordion-style feature with arrows. Can someone provide guidance on achieving this?

javascripthtmlcss

Answer №1

Utilize the :focus pseudo-class to ensure that elements with the .program class support it properly. Consider using an <a> tag instead of a <div>, as it may not have the :focus state.


    .program:hover .more-details,
    .program:focus .more-details {
        opacity: 1;
    }

Alternatively, you can implement JavaScript:


    var elements = document.querySelectorAll(".program");

    elements.forEach((el) => {
        el.addEventListener('click', function(event) {
            el.classList.toggle('open');
        });
    });

Make adjustments to your styles:


    .program:hover .more-details,
    .program.open .more-details {
        opacity: 1;
    }

Answer №2

If you're looking for a solution, JavaScript is the way to go. Here's what worked for me: 

const temp = document.querySelector(".prog-image");
const details = document.querySelector(".more-details");
const showText = () =>{
 console.log("W"); details.classList.toggle("detail");
}
temp.addEventListener("click",showText);
temp.addEventListener("mouseover",showText);
temp.addEventListener("mouseout",showText);
<div class="program prog-image" style="background-image: url(https://imagevars.gulfnews.com/2019/07/23/Timberwolf_16c1de35555_base.jpg)">
      <div class="more-details"> 
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, voluptates.</li>
          <li>Lorem ipsum dolor sit amet.</li>
        </ul>
      </div>
    </div>

  .detail{
        opacity: 1;
    }

Answer №3

Make sure to implement the code provided above.

HTML

<div class="program">
 <div class="prog-image" style="background-image: url(https://imagevars.gulfnews.com/2019/07/23/Timberwolf_16c1de35555_base.jpg)">
  <div class="more-details">
   <ul>
     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, voluptates.</li>
     <li>Lorem ipsum dolor sit amet.</li>
   </ul>
  </div>
 </div>
</div>

CSS

.program{
    height: 400px;
    width: 700px;
    position: relative;
}
.prog-image {
    background-size: cover;
    height: 100%;
}
ul{
    list-style: none;
}
.more-details {
  opacity: 0;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50%;
}
@media only screen and (min-width: 768px) {
  .more-details{
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .program:hover .more-details{
      opacity: 1;
  }
}
@media only screen and (max-width: 767px) {
    .program{
      width: 100%;
    }
    .prog-image.content-show .more-details {
      opacity: 1;
    }
}

JQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function() {
        jQuery('.prog-image').click(function() {
          jQuery(this).toggleClass("content-show");
        });
      });
</script>

Answer №4

To enhance your code, consider incorporating jQuery:

$(".program").on("click", function () {
    $(".more-details").fadeIn();
});

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

Exploring the dimensions of checkboxes in Fluent UI Northstar

Is there a specific method for controlling the size of checkboxes in Fluent UI Northstar? My attempts to modify the font size and height have only impacted the label, not the checkbox itself. Unfortunately, I couldn't find any guidance on this in the ...

cssreactjscheckboxfluentui-react

An unusual CSS phenomenon with z-index

I've encountered a peculiar issue with my z-indexing. I have an image positioned relatively with a z-index of 1, and it should be above my navigation that is positioned absolutely with a z-index of -1. The problem is that upon page load, the image ap ...

htmlcss

Is JavaScript capable of producing different results with the same input?

I am currently revising one of my scripts and have come across a perplexing issue. The variable command is an input, and I conducted the following test with identical regular expressions: var parts = command.match(/([^\s"]+(?=\s*|$))|(".+?")/g); ...

javascriptvariables

Ways to resolve the issue of being unable to retrieve data using jQuery

My code is working, but I am facing a little annoying problem that I can't solve on my own. The problem is that I can only retrieve the first record (id) from my data grid, but I can't retrieve the second or any other record id. For example: W ...

phpjqueryhtmlajax

Incorporating AngularJS into JSP for Seamless Integration

As part of our application upgrade, we are transitioning from JSP to AngularJS one module at a time. One challenge we face is transferring user data from JSP to AngularJS (specifically index.html). We aim for a smooth transition where invoking the Angular ...

javajavascriptangularjsjsprest

Ensuring each field is filled correctly in a step-by-step registration form

I have been working on implementing a step-by-step registration form, and I am facing an issue. When I click on the next button, all fields should be mandatory to proceed to the next step. It's crucial for the user experience that they fill out all th ...

javascriptjqueryhtml

Is the Packery image grid only functional when the background image is specified in CSS and not in JavaScript? Perhaps we need to look into using Await/Sem

I've successfully implemented a packery image grid that is responsive and functional when the background image in the .item-content section is defined in the CSS file: http://codepen.io/anon/pen/eJdapq .item-content { width: 100%; height: 100%; ...

javascriptjqueryhtmlcsspackery

The integration of Node.js and Socket.io with Phaser.js is experiencing difficulty when connecting to socket.io with the parameters "?EIO=3&transport

My node.js server is up and running, and my phaser.js game is functioning as expected. However, I am facing an issue where the 'connected' console log is not displaying when the game runs. Instead, I am receiving this error message on the client ...

javascriptnode.jsexpresssocket.iophaser-framework

Are you looking to add some flair to your Flexbox layout using Media

I am in the process of developing a website using flexbox, and one key aspect of the design is to hide the navigation bar, specifically the left panel in this JSFiddle, when the viewport width is between 480px and 1023px. The current implementation achieve ...

htmlcsswebkitflexbox

`Vue JS table with Boostrap styling showcasing a loading indicator for busy state`

Issue: I need to show a loading icon while waiting for the table to load. https://i.sstatic.net/kRCbL.png I am utilizing Boostrap-vue JS, which is built on top of Bootstrap, and VueJS's "b-table" component to display approximately 3000 rows in a tabl ...

javascriptvue.jsbootstrap-4

Display column header row divider for pinned columns in v5 DataGrid

I'm attempting to customize the appearance of pinned columns in MUI's DataGrid by adding a column header-row divider. The official demo by MUI for pinned columns [https://codesandbox.io/s/qix39o?file=/demo.tsx] displays the pinned column header ...

cssreactjsmaterial-ui

Utilize the parsing functionality in three.js to extract JSON geometry data

After exporting a model from Blender using the three.js exporter and successfully loading it with the JSONLoader, my next challenge is to store the JSON information in a variable and parse it to display the model without having to load an external file. T ...

javascriptthree.js

"Is there a way to extract a value from a JSON object using

I have an object with the following key-value pairs: { 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier': '918312asdasc812', 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name': 'Login1&a ...

javascriptjsontypescript

Establishing pathways in Angular 2

I'm currently working on configuring a route so that whenever I visit http://localhost:8080/user/beta/, it will redirect to http://localhost:8080/user/beta/#spreadsheet. The goal is to display the spreadsheet view, but instead of achieving that result ...

javascriptangularjsangular

Exploring nested JSON data to access specific elements

When I use console.log(responseJSON), it prints the following JSON format logs on the screen. However, I am specifically interested in printing only the latlng values. When I attempt to access the latlng data with console.log(responseJSON.markers.latlng) o ...

javascriptarraysjsonobject

Error: Failed to parse the given color specification

My chrome extension is showing an error message: Unchecked runtime.lastError: The color specification could not be parsed. This error seems to be in the popup.html: 1 -> <! DOCTYPE html> line. Can anyone explain what this means and how to fix ...

javascriptgoogle-chrome-extension

"Implementing JQuery addClass Functionality to Enhance Menu Sty

I've created a menu that is stacked on top, with the "Representaciones" section shown on the same page below a welcome image. However, when I click on it, everything works fine but if I refresh the page, the "selected" class disappears from "represent ...

jquerycssmenu

Can you explain the distinction between $(document) and $('*') and how can we determine which library $ is referring to?

My interpretation is this: $(document) will contain the entire DOM of the current page just like document, while $('*') also selects the entire DOM. What sets them apart, aren't they essentially the same? Will assigning $ from different lib ...

javascriptjquerybrowser

How to extract the HTML content from specific text nodes using Javascript

I have a piece of HTML that looks like this: <div id="editable_phrase"> <span data-id="42">My</span> <span data-id="43">very</span> <span data-id="1">first</span> <span data-id="21">phrase< ...

javascriptjqueryhtml

How to grab JSON data within a CakePHP 2.2 controller

Trying to transmit JSON data from a web page using JQuery, as shown below: $.ajax({ type: "post", url: "http://localhost/ajax/login", data: '{username: "wiiNinja", password: "isAnub"}', dataType: "json", contentType: "applica ...

javascriptjsoncakephp