Reduce Bigger content in to tiny one using Javascript - javascript

Expected output: i want some content in the beginning, in images clearly shows appropriate result
what i tried: HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">Testing
<ul>
<li>first</li>
</ul>
</div>
Read More
Javascript:
<script>
$(document).ready(function () {
$(".content").hide();
$(".show_hide").on("click", function () {
var txt = $(".content").is(':visible') ? 'Read More' : 'Read Less';
$(".show_hide").text(txt);
$(this).prev('.content').slideToggle(200);
});
});
</script>
Codepen link:enter link description here

If it's only one then just separate the header.
<div class="Header">Testing</div>
<div class="content">
<ul>
<li>first</li>
</ul>
</div>
But if there are multiple items like this, then you can use context of the button which is clicked and then modify around it. Also since you are already using jQuery you can have a look at Accordion for multiple items like this.

Related

Javascript - populate a div with content from a hidden div using click buttons

I need some help. As you will see in my fiddle, I am attempting to use buttons to populate a single container div with content from multiple hidden divs, depending on which button is clicked. The problem I am having is, I don't know how to access the actual content in the hidden divs to populate the container div. As of now, I am using the id attributes for the hidden divs to demonstrate which div content I would like to display in the container.
I've seen a few other posts with link <a> attributes referencing hidden content, but none so far using a button element with click functionality to change div content.
jQuery(function ($) {
$('#button1').click(function () {
$('#info').empty();
$('#info').prepend('#option1');
});
$('#button2').click(function () {
$('#info').empty();
$('#info').prepend('#option2');
});
$('#button3').click(function () {
$('#info').empty();
$('#info').prepend('#option3');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1">Button 1</button></li>
<li class="buttons"><button id="button2">Button 2</button></li>
<li class="buttons"><button id="button3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
Here is my fiddle
Here's a version that uses jquery data attributes. It reduces the redundancy and complexity and can be configured easily.
<body>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1" data-link="option1">Button 1</button></li>
<li class="buttons"><button id="button2" data-link="option2">Button 2</button></li>
<li class="buttons"><button id="button3" data-link="option3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info">
</div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
</body>
<script>
$('.buttons button').click(function (){
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
</script>
Example : https://jsfiddle.net/yvsu6qfw/3/
It sounds like maybe you were looking for using the button itself to populate data built into the button with a data attribute or something? If so you can do something like this:
HTML
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button data-info="Box">Button 1</button></li>
<li class="buttons"><button data-info="Google Drive">Button 2</button></li>
<li class="buttons"><button data-info="Box">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
jQuery
$(document).ready(function (){
$('#button-column button').click(function (){
$('#info').html($(this).attr('data-info'));
});
});
If you want the first button to load the content from the first hidden div etc. without relying upon using the id attributes, you can use the .index() method. When you pass this as an argument it will return the index value of the click event target in the collection $("#button-column .buttons :button"). Afterwards you can pass the index value to the .get() method to retrieve the corresponding element from the collection of hidden divs $("#hiddenDivs .info").
$().ready(function(){
$("#button-column .buttons :button").on("click", function(){
$('#info').empty();
var clickedIndex = $("#button-column .buttons :button").index(this);
var hiddenInfo = $("#hiddenDivs .info").get(clickedIndex);
$('#info').prepend( $(hiddenInfo).text() );
});
});
you can use html function, without parameter gets the content of the element
with parameter replaces the content with the string parameter
$(document).ready(function (){
$('#button1').click(function (){
$('#info').html( $('#option1').html() );
});
$('#button2').click(function (){
$('#info').html( $('#option2').html() );
});
$('#button3').click(function (){
$('#info').html( $('#option3').html() );
});
});
In your code example, you do for example:
$('#info').prepend('#option1');
What you instruct to do here, is adding a text string '#option1' to an element with ID info.
What you intend to do is prepending the content of ID option1 to the element with ID info. You could do something like this instead:
$('#info').prepend($('#option1').html());
Another approach could be (but I don't know if that's relevant for you) to not clone content (since it costs you repaints) but toggle the specific elements instead. For example:
$('#option1,#option2').hide();
$('#option3').hide();
And yet another one: use data-attributes on your buttons:
Button 1
Button 2
<div id="info">
</div>
And the JS:
$('.button').on('click', function(event) {
event.preventDefault();
$('#info').html($(event.currentTarget).attr('data-text'));
});
Don't repeat yourself! To get the number out of an ID replace with "" all that is not a number using RegExp \D.
Using number from ID
Than, to get the actual content you can use $("#option"+ num).html() or $("#option"+ num).text() methods:
jsFiddle demo
jQuery(function ($) {
$('.buttons button').click(function () {
var num = this.id.replace(/\D/g,"");
$("#info").html( $("#option"+ num).html() );
});
});
Target element using data-* attribute
Alternatively you can store inside a data-* attribute the desired target selector ID:
<button data-content="#option1" id="button1">Button 1</button>
and than simply:
jsFiddle demo
jQuery(function ($) {
$("[data-content]").click(function () {
$("#info").html( $(this.dataset.content).html() );
});
});
http://api.jquery.com/html/
http://api.jquery.com/text/
If the expectation is to get same indexed hidden div content, Then the below code should work.
$(document).ready(function (){
$('.buttons button').click(function (){
$('#info').empty();
var index = $('.buttons button').index($(this));
$('#info').html($('.info:eq('+index+')').html());
});
});

Two jquery ui tabbed divs on one page. One works, the other doesn't

I have a page with two div panels, a left and a right. Both panels are tabbed using jquery-2.1.4.min.js and jquery-ui.js. One panel has three tabs, and it works.
The js in the head of my page looks like this:
$(function(){
// Doesn't matter if following two lines are reversed. Same output.
$( "#property-card" ).show().tabs(); // this one doesn't work
$( "#tabs" ).show().tabs(); // this one works
});
The html looks like this:
//This tabbed content works:
<div id="tabs">
<ul>
<li>Tasks</li>
<li>Notes</li>
<li>Photos</li>
</ul>
<div id="tabs-1">
<!-- Tasks -->
</div>
<div id="tabs-2">
<!-- Notes -->
</div>
<div id="tabs-3">
<!-- Other -->
</div>
The other div panel looks something like this:
//This one shows hyperlinked text within the content area, instead of showing tabs
<div id="property-card" class="eight columns light-manilla curved10 border-dark border-2 border-ridge padding-1-percent">
<ul>
<li>Property</li>
<li>Help</li>
<li>List Price</li>
<li>Taxes</li>
<li>HOA</li>
<li>Showing Instructions</li>
<li>BPO Values</li>
<li>Buyer Leads</li>
</ul>
<div id="property">
</div>
<div id="property-help">
</div>
<div id="property-list-price">
</div>
<div id="property-taxes">
</div>
<div id="property-hoa">
</div>
<div id="property-showing-instructions">
</div>
<div id="property-bpo-values">
</div>
<div id="property-buyer-leads">
</div>
</div>
(not sure if this is related) Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/jquery-2.1.4.min.js:4:14346
ReferenceError: data is not defined
(I think this one is related) jquery-2.1.4.min.js%20line%202%20%3E%20eval:35:1
See inline screen shot sample for example of what's going on.
Hate answering my own questions, but in another file at the bottom of my html, there is another javascript block, which "activated" the working tabbed div, but because I didn't add the new tabbed div (because I didn't realize that second javascript block was there) the second tabbed div didn't work. Here is what made it work:
$(function () {
$('#property-card').tabs({
activate: function (event, ui) {
var $activeTab1 = $('#property-card').tabs('option', 'active');
}
});
$('#tabs').tabs({
activate: function (event, ui) {
var $activeTab2 = $('#tabs').tabs('option', 'active');
if ($activeTab2 == 2) {
// HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
$("#mls-images-carousel").css("display","block");
retrieveAssetImages('<?php echo $as_id; ?>');
}
else{
$("#mls-images-carousel").css("display","hidden");
}
}
});
});

Replace an object by another object in the same frame in JavaScript?

I have created a list with to options on the homepage (index.html). The problem I am encountering is that when I run the code; if the user clicks on "list_row1" then "table1" shows up (everything works great), and after this if the user clicks on "list_row2" then "table2" shows up 100-200px below table1 (everything does not work great). I want table1 to simply be replaced by table2 and vice-versa in the same spot by the list (list_row1 and list_row2) option the person clicks on.
For example, I want a red circle to be replace by a black circle and vice versa..
Here is my index.html with JavaScript code below:
$(function(){
$('#list_row1').on('click',function(){
$('#table2').hide();
$('#table1').toggle();
});
$('#list_row2').on('click',function(){
$('#table1').hide();
$('#table2').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul class="list-group">
<div id = "list_row1">
<li class="list-group-item">Exhaust Temperature</li>
</div>
<div id = "list_row2">
<li class="list-group-item">Cylinder Pressure</li>
</div>
</ul>
</div>
<div id = "table1"></div>
<div id = "table1"></div>
Please check your code. you have two divs with same id
<div id = "table1"></div>
<div id = "table1"></div>
Your id is same for both the tables. this should be your code:-
<div>
<ul class="list-group">
<div id = "list_row1">
<li class="list-group-item">Exhaust Temperature</li>
</div>
<div id = "list_row2">
<li class="list-group-item">Cylinder Pressure</li>
</div>
</ul>
</div>
<div id = "table1">table1</div>
<div id = "table2">table2</div>
<script>
$(function(){
$('#list_row1').on('click',function(){
$('#table2').hide();
$('#table1').toggle();
});
$('#list_row2').on('click',function(){
$('#table1').hide();
$('#table2').toggle();
});
});
</script>
Here is an example of how you could toggle the two 'table' divs while also improving your markup: http://jsfiddle.net/8fr0484L/3/
Use <a> anchor tags inside your <li> list items instead of attempting to use divs. This will allow you to make use of the anchor tag's default clickable behaviour.
<ul class="list-group">
<li class="list-group-item"><a href='#' id='list_row1'>Exhaust Temperature</a></li>
<li class="list-group-item"><a href='#' id='list_row2'>Cylinder Pressure</a></li>
</ul>
In the code it might be worth hiding the 'table' divs in the beginning (on page load), assuming you don't know at that point what the user wants to view.
// hide the tables by default when page loads
$('#table1').hide();
$('#table2').hide();
$('#list_row1').on('click',function(event){
event.preventDefault(); // halt the anchor tag's default behaviour
$('#table2').hide();
$('#table1').show();
});
$('#list_row2').on('click',function(event){
event.preventDefault(); // halt the anchor tag's default behaviour
$('#table1').hide();
$('#table2').show();
});
<ul class="list-group">
<div id = "list_row1"><li class="list-group-item">Exhaust Temperature</li></div>
<div id = "list_row2"><li class="list-group-item">Cylinder Pressure</li></div>
</ul>
</div>
<div id = "table1">abc</div>
<div id = "table2">pqr</div>
<script>
$(function(){
$('#list_row1').on('click',function(){
$('#table2').css({
visibility : "hidden"
});
$('#table1').css({
visibility : "visible"
});
});
$('#list_row2').on('click',function(){
$('#table1').css({
visibility : "hidden"
});
$('#table2').css({
visibility : "visible"
});
});
});
</script>
Hi its a typo both of your table have same id 'table1'. And also a small suggestion hide both the table divs at the load itself. I'm posting the new JavaScript code below have a look.
$(function(){
$('#table2').hide();
$('#table1').hide();
$('#list_row1').on('click',function(){
$('#table2').hide();
$('#table1').toggle();
});
$('#list_row2').on('click',function(){
$('#table1').hide();
$('#table2').toggle();
});
});

How to use the toggle function click open and close yet close menu when one selected

After searching through various tutorials i found something that almost fits my needs but i'm having trouble getting the menu to function how i really would like it too.
I set up a jsfiddle to show my efforts, i'm not very good at this even though i'm trying my best to understand.
http://jsfiddle.net/HZksH/2/
I would like some help on how i can get this menu , when in default to always show the content1 area, then if you toggle open the "Open/Close" buttom and menu1,menu2,menu3 appear , when i select any of the 3 , the content replaces the content1 and then closes the menu again
any ideas would be appreciated
<div class="menu">
<div class="submenu" id="menu" data-content="sort">menu1</div>
<div class="content" id="sort">content1</div>
<div class="submenu" id="menu1" data-content="1sort">menu2</div>
<div class="content" id="1sort">content2</div>
<div class="submenu" id="menu2" data-content="sort2">menu3</div>
<div class="content" id="sort2">content3</div>
</div>
$(document).ready(function() {
$('.menu').hide().before('Open/Close');
$('a#toggle-menu').click(function() {
$('.menu').slideToggle(1000);
return false;
});
$('.content').hide();
$('.submenu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
});
});
Here refer to this fiddle: http://jsfiddle.net/HZksH/3/
I have modified your js a bit
$(document).ready(function() {
$('.menu').hide().before('Open/Close');
$('a#toggle-menu').click(function() {
$('.menu').slideToggle(1000);
return false;
});
//$('.content').hide();
$('.submenu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
$('.menu').slideToggle(1000);
});
});
I hope it solves your problem

Changing content in a div when a link is clicked

I am trying to change a div content box when a link above that box is clicked. I added a click function to the individual buttons then the corresponding dive containing the content for that particular box should be displayed.
When I apply the jQuery to the page, the content does not change according to the link that is clicked and the page displays awkwardly.
This is the jsfiddle I'm working with.
The webpage I'm working with is here.
Place where am i making the mistake.
The jQuery I'm working with so far looks like this
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
$('.question2').click(function(){
$('.new_member_box_display').load('#answer2');
})
$('.question3').click(function(){
$('.new_member_box_display').load('#answer3');
})
$('.question4').click(function(){
$('.new_member_box_display').load('#answer4');
})
});//end of ready
The HTML I'm working with looks like this :
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
</div>
<div class="clear" class="question"></div>
<div id="answer1">
1
</div>
<div id="answer2">
2
</div>
<div id="answer3">
3
</div>
<div id="answer4">
4
</div>
<div class="new_member_box_display" id="question">
Text will appear here when one of the tabs above is clicked
</div>
load() loads an external file with ajax, not elements on your page. You're probably just trying to hide and show elements :
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});
FIDDLE
Here's a fiddle that does what I think you're looking to do. There are cleaner ways to do it, but this should work.
http://jsfiddle.net/PZnSb/6/
Basically you want to set the inner html of one element to the inner html of another, like this:
$('.question1').click(function(){
$('.new_member_box_display').html($('#answer1').html());
})
instead of this:
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
It seems you just want the text to change when you click, try this.
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').text($('.answer1 ').text());
});
$('.question2').click(function(){
$('.new_member_box_display').text($('.answer2').text());
});
$('.question3').click(function(){
$('.new_member_box_display').text($('.answer3').text());
});
$('.question4').click(function(){
$('.new_member_box_display').text($('.answer4').text());
});
});
http://jsfiddle.net/cornelas/PZnSb/7/embedded/result/

Categories