I have a "list" with three items. Each list by default, shows an image and text.
When one of these div's is clicked, I want its content to be shown in another div (along with more information).
clickable-li content will always be displayed in the secondary div. By content, I am referring to 1. It's image 2. It's header (h3) and 3. It's textm which for now is "this is sample text for icon 1".clickable-li, it will show its information accordingly.Current approach:
$('#icon-1').click(function() {
$('image_col-2-wrapper h3').html('icon 1');
$('image_col-2-wrapper p').html('this is sample text for icon 1');
});
$('#icon-2').click(function() {
$('image_col-2-wrapper h3').html('icon 2');
$('image_col-2-wrapper p').html('this is sample text for icon 2');
});
$('#icon-3').click(function() {
$('image_col-2-wrapper h3').html('icon 3');
$('image_col-2-wrapper p').html('this is sample text for icon 3');
});img {
height: 50px;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.text_col-1 {
display: grid;
grid-template-columns: 100px 100px 100px;
}
.text_col-1 .clickable-li {
cursor: pointer;
}
.image_col-2 {
background-color: #5fc8c5;
width: 650px;
}
.image_col-2-wrapper {
padding: 40px;
height: 100%;
}<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<div class="container">
<!-- LEFT -->
<div class="text_col-1">
<!-- ICON 1 -->
<div class="clickable-li" id="icon-1">
<img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
<span>Icon 1</span>
</div>
<!-- ICON 2 -->
<div class="clickable-li" id="icon-2">
<img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
<span>Icon 2</span>
</div>
<!-- ICON 3 -->
<div class="clickable-li" id="icon-3">
<img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
<br>
<span>Icon 3</span>
</div>
</div>
<!-- RIGHT -->
<div class="image_col-2">
<div class="image_col-2-wrapper">
<img src="https://img.icons8.com/metro/1600/1-circle.png">
<h3>Icon 1</h3>
<p>this will be the text that appears on li click</p>
</div>
<p></p>
</div>
<!---->
</div>As ssamuel said, your issue was the missing . in the class name.
⋅ ⋅ ⋅
Anyway…
You could enhance your code to have only one JavaScript function. And keep all the content in the HTML.
New snippet (using an hidden div element as your html container)
$('.clickable-li').click(function(title, text) {
$('.image_col-2-wrapper h3').html($(this).attr("mytitle"));
$('.image_col-2-wrapper p').html($(this).find(".mytext").html());
});img {
height: 50px;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.text_col-1 {
display: grid;
grid-template-columns: 100px 100px 100px;
}
.text_col-1 .clickable-li {
cursor: pointer;
}
.image_col-2 {
background-color: #5fc8c5;
width: 650px;
}
.image_col-2-wrapper {
padding: 40px;
height: 100%;
}
.mytext {
display: none;
}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<!-- LEFT -->
<div class="text_col-1">
<!-- ICON 1 -->
<div class="clickable-li" id="icon-1" mytitle="Icon 1">
<img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
<span>Icon 1</span>
<div class="mytext">
<p>this is sample text for icon 1</p>
</div>
</div>
<!-- ICON 2 -->
<div class="clickable-li" id="icon-2" mytitle="Icon 2">
<img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
<span>Icon 2</span>
<div class="mytext">
<p>this is sample text for icon 2</p>
<h4>But this one also has a header</h4>
<p>and more text!</p>
</div>
</div>
<!-- ICON 3 -->
<div class="clickable-li" id="icon-3" mytitle="Icon 3">
<img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
<br>
<span>Icon 3</span>
<div class="mytext">this is sample text for icon 3</div>
</div>
</div>
<!-- RIGHT -->
<div class="image_col-2">
<div class="image_col-2-wrapper">
<img src="https://img.icons8.com/metro/1600/1-circle.png">
<h3>Icon 1</h3>
<p>this will be the text that appears on li click</p>
</div>
<p></p>
</div>
</div>⋅ ⋅ ⋅
Old snippet (using custom attributes)
$('.clickable-li').click(function(title, text) {
$('.image_col-2-wrapper h3').html($(this).attr("mytitle"));
$('.image_col-2-wrapper p').html($(this).attr("mytext"));
});img {
height: 50px;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.text_col-1 {
display: grid;
grid-template-columns: 100px 100px 100px;
}
.text_col-1 .clickable-li {
cursor: pointer;
}
.image_col-2 {
background-color: #5fc8c5;
width: 650px;
}
.image_col-2-wrapper {
padding: 40px;
height: 100%;
}<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<!-- LEFT -->
<div class="text_col-1">
<!-- ICON 1 -->
<div class="clickable-li" id="icon-1" mytitle="Icon 1" mytext="this is sample text for icon 1">
<img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
<span>Icon 1</span>
</div>
<!-- ICON 2 -->
<div class="clickable-li" id="icon-2" mytitle="Icon 2" mytext="this is sample text for icon 2">
<img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
<span>Icon 2</span>
</div>
<!-- ICON 3 -->
<div class="clickable-li" id="icon-3" mytitle="Icon 3" mytext="this is sample text for icon 3">
<img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
<br>
<span>Icon 3</span>
</div>
</div>
<!-- RIGHT -->
<div class="image_col-2">
<div class="image_col-2-wrapper">
<img src="https://img.icons8.com/metro/1600/1-circle.png">
<h3>Icon 1</h3>
<p>this will be the text that appears on li click</p>
</div>
<p></p>
</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments