change the content class when an image link is clicked

Question

change the content class when an image link is clicked

I am looking to create a similar website concept like the one found at

The idea is to have two images, and when clicking on an image, compare a specific content below the image in full width. This also needs to be responsive.

How can I achieve this? The HTML markup for this concept is as follows:

<div class="imagecontainer"></div>

<div class="image1"></div>
<div class="image2"></div>
</div>


<div class="contentcontainer"></div>

<div class="content1"></div>
<div class="content2"></div>
</div>

Update

I have tried every code posted but nothing seems to work on my page. Here is what the page looks like:

<?php
if ( !defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}
?>
<?php if ( have_posts() ) : ?>
    <div class="row archive-courses course-list archive_switch" itemscope itemtype="http://schema.org/ItemList">

        <?php
        // Start the Loop.
        while ( have_posts() ) : the_post();
            learn_press_get_template( 'archive-course-content.php' );
        endwhile;
        // Previous/next page navigation.

        ?>
    </div>
    <?php
    learn_press_course_paging_nav();
endif;
?>

No matter what I try, there always seems to be an issue with implementation.

javascript jquery html css

Answer 1

Answer №1

Check out this sample code for an interactive element:

$('li').click(function(){
  $(this).parent().find('.selected').removeClass('selected');
  $(this).addClass('selected');
  $('.content').hide();
  
  
  var content = $(this).attr('ref');
  $('#'+ content).show();
});

ul {
  width: 100%;
}
ul li {
  width:100px;
  height: 100px;
  display: inline-block;
  border-radius: 100px;
  text-align: center;
  background-color: #ccc;
  line-height: 100px;
  vertical-align: middle;
  cursor: pointer;
}

ul li:hover,
ul li.selected {
  background-color: #eee;
}



div.content {
  display: block;
  width: 300px;
  height: 100px;
  background-color: yellow;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
    <li ref="div-1" class="selected">Button 1</li>
    <li ref="div-2">Button 2</li>
<ul>
  
<div>
    <div id="div-1" class="content">Div 1</div>
    <div id="div-2" class="content" style="display: none;">Div 2</div>
</div>

Answer 2

Check out this sample code for an interactive element:

$('li').click(function(){
  $(this).parent().find('.selected').removeClass('selected');
  $(this).addClass('selected');
  $('.content').hide();
  
  
  var content = $(this).attr('ref');
  $('#'+ content).show();
});

ul {
  width: 100%;
}
ul li {
  width:100px;
  height: 100px;
  display: inline-block;
  border-radius: 100px;
  text-align: center;
  background-color: #ccc;
  line-height: 100px;
  vertical-align: middle;
  cursor: pointer;
}

ul li:hover,
ul li.selected {
  background-color: #eee;
}



div.content {
  display: block;
  width: 300px;
  height: 100px;
  background-color: yellow;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
    <li ref="div-1" class="selected">Button 1</li>
    <li ref="div-2">Button 2</li>
<ul>
  
<div>
    <div id="div-1" class="content">Div 1</div>
    <div id="div-2" class="content" style="display: none;">Div 2</div>
</div>

Answer 3

Answer №2

Simply click on the image to switch content visibility. I have created a snippet that transitions the content with a fade effect. You can easily add more images and content following the same logic.

$(document).ready(function(){

            $('.image').on("click",function(){
                if(!$(this).find("img").hasClass("selected")){
                    $(".image img").removeClass("selected");
                    $(this).find("img").addClass("selected");

                    $('.content').hide();
                    $("."+$(this).attr("rel")).fadeIn();
                }
            });

        });

.image > img{
            padding: 50px;
            display: inline;
            float: left;
        }

        .selected{
            opacity: 0.5;
        }

        .content{
            float: left;
            border: 1px solid black;
            width: 50%;
            display: inline;
            padding: 10px;
            margin: 10px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div class="imagecontainer"></div>

        <div class="image" rel="content1"><img width="100px" class="img1 selected" src="http://www.cliparthut.com/clip-arts/124/pink-circle-clip-art-124566.png"></img></div>
        <div class="image" rel="content2"><img width="100px" class="img2"  src="http://www.cliparthut.com/clip-arts/124/pink-circle-clip-art-124566.png"></img></div>



        <div class="contentcontainer">

        <div class="content content1">HELLO content 1</div>
        <div class="content content2" style="display:none;">HELLO content 2</div>
        </div>

Answer 4

Simply click on the image to switch content visibility. I have created a snippet that transitions the content with a fade effect. You can easily add more images and content following the same logic.

$(document).ready(function(){

            $('.image').on("click",function(){
                if(!$(this).find("img").hasClass("selected")){
                    $(".image img").removeClass("selected");
                    $(this).find("img").addClass("selected");

                    $('.content').hide();
                    $("."+$(this).attr("rel")).fadeIn();
                }
            });

        });

.image > img{
            padding: 50px;
            display: inline;
            float: left;
        }

        .selected{
            opacity: 0.5;
        }

        .content{
            float: left;
            border: 1px solid black;
            width: 50%;
            display: inline;
            padding: 10px;
            margin: 10px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div class="imagecontainer"></div>

        <div class="image" rel="content1"><img width="100px" class="img1 selected" src="http://www.cliparthut.com/clip-arts/124/pink-circle-clip-art-124566.png"></img></div>
        <div class="image" rel="content2"><img width="100px" class="img2"  src="http://www.cliparthut.com/clip-arts/124/pink-circle-clip-art-124566.png"></img></div>



        <div class="contentcontainer">

        <div class="content content1">HELLO content 1</div>
        <div class="content content2" style="display:none;">HELLO content 2</div>
        </div>

Answer 5

Answer №3

This is the method I used:

$(".img").click(function(){
    $(".content").hide();
    $("."+$(this).attr("content")).fadeToggle(true);
});

Check out the JSFiddle demonstration here

Answer 6

This is the method I used:

$(".img").click(function(){
    $(".content").hide();
    $("."+$(this).attr("content")).fadeToggle(true);
});

Check out the JSFiddle demonstration here

change the content class when an image link is clicked

Answer №1

Answer №2

Answer №3

Similar questions

In WordPress, the magic_quotes feature is essential for json_decode to function properly

Tips for adding a "Select All" feature to a dropdown list?

Tips for positioning an h4 and image element in a navigation bar

Using PHP to send multiple data through ajax

What is the best way to showcase a JSON object in an attractive format on a webpage?

Implementing event listeners with Angular UI-Router

What is the best way to open Chrome Developer Console using Selenium?

Unable to submit with the enter key using vue-btn

Show only the results that have identifiers matching the parameter in the URL

Using both ng-if and ng-click in AngularJS for enhanced functionalities

The error message "404 Not found" is returned when attempting to retrieve a Google spreadsheet

Pointer-events property in pseudo elements not functioning as expected in Firefox browser

D3 and dimple line graphs

Error: The function loadJSON has not been declared

Instructions for printing a page and closing the Print window using Selenium

Is it possible to retrieve the current selector as a string in LESS?

How to bind parent object scope to MySQL query's anonymous callback in Node.js

Creating a user-specific subdomain in node.js: A step-by-step guide

Errors may occur when attempting to auto-refresh a page with a PHP-generated image using Ajax

Is it feasible to extract the Json object from its current location within another object?