Looking for "show more" "hide" javascript/jquery - javascript

I have been searching all day on google for this, basically I have a field that can have anywhere from 50 to 500 characters, so I am looking for a script that allows me to display 200 at a time(as example) with a read more link to expand the rest of the content, so far the closest I have found is this(see code below) but that requires manually separating the content up which is not really possible..
<p>...This is all visible content...
<a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">See more.</a>
</p>
<div id="example" class="more">
<p>...This content is hidden by default...</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content.</a></p>
Where I need something like..
<div class="hidden"><?php $rows['content']; ?></div>
Even if there was a non script PHP way to do this I would be happy.

Html
<div class="box">
<p id="id_full_text" class="class_full_text">
Full Text
<p>
Show more
<p id="id_hide_text" class="class_hide_text">
Hide Text
<p>
Hide more
</div>
css
.class_hide_text, .class_link_hide {display: none;}
Jquery (in you have just 1 in the same page)
$('#id_link_show_more').click(function () {
$('#id_full_text').hide(); // hide fullText p
$('#id_link_show_more').hide(); //hide show button
$('#id_hide_text').show('100'); // Show HideText p
$('#id_link_hide').show('100'); // show link hide
});
$('#id_link_hide').click(function () {
$('#id_link_hide').hide(); // hide link hide
$('#id_hide_text').hide(); // hide the hide Text
$('#id_link_show_more').show('100'); //show ths show button
$('#id_full_text').show('100'); // show fullText
});
Jquery (if you have more than 1 in the same page, because you don't want open all the hide divs in the page)
$('.class_link_show_more').click(function () {
var the_parent = $(this).parent();
the_parent.children('.class_full_text').hide(); // hide fullText p
the_parent.children('.class_link_show_more').hide(); //hide button
the_parent.children('.class_link_hide').show('100'); // Show HideText p
the_parent.children('.class_hide_text').show('100'); // Show HideText p
});
$('.class_link_hide').click(function () {
var the_parent = $(this).parent();
the_parent.children('.class_link_hide').hide(); // hide link hide
the_parent.children('.class_hide_text').hide(); // hide hide text p
the_parent.children('.class_link_show_more').show('100'); //Show link show
the_parent.children('.class_full_text').show('100;); // show full text
});
Note: the number into the show(x) is the time (millisecond) to show the div

Related

Toggle re-hides all divs; need parent div to remain visible

Apologies in advance, I'm not terribly familiar with Javascript, but I do understand what this code is doing and why it is causing me this problem. I'm just not sure how to go about solving it AT all.
On my webpage I have an open/close dialogue toggle which is the parent div, the dialogue box is hidden upon the page loading. Within this dialogue box are more hidden divs for the dialogue options. Problem is, when one of the dialogue options is clicked, the script hides the entire dialogue box, preventing any of the dialogue options from being seen, because it can only show one div at a time, regardless of its parent or child status. When a div is clicked, all other divs are re-hidden.
I need the parent div to remain visible until the dialogue box toggle is clicked again. The individual choices DO need to hide/unhide when another choice is clicked.
Not sure if I should include any CSS here, it's just styling the dialogue box and its buttons within.
<div id="dialogue" style="display:none;">
<div class="room">
Room description here. What do you do?
<div class="buttons">
Pet the cat.
<br>
<div id="cat" style="display:none;">aw yeah kitty time</div>
Turn on the radio.
<br>
<div id="radio" style="display:none;">
<br>
audio file and tracklist here
</div>
</div>
</div>
</div>
<span class="toggle">
[Open/close dialogue.]
</span>
<script type="text/javascript">
var divs = ["cat", "radio", "dialogue"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
I probably need a third function here because currently all the toggles are grouped together, hence why they're interacting like this, but I don't have the first clue how to accomplish this. I have been looking and haven't found anything that seems to match my needs.
Made a few corrections to your HTML so the href does not refresh the page on click. Also added in a few attributes (aria-controls) to track which div the button controls. I added comments to the JavaScript. There are plenty of Aria attributes they typically help with accessibility but they are super useful for keeping track of things in HTML and passing information to JavaScript.
//create a function to handle the click that takes in the event as a argument
function handleClick(event) {
//find out which div the button controls
const ariaControls = event.currentTarget.getAttribute("aria-controls"),
//select the controlled div
controlledAria = document.getElementById(ariaControls);
// if the controlled div is cat
if (ariaControls === "cat") {
// hide the radio div
document.getElementById("radio").classList.add("hide");
// if the controlled div is radio
} else if (ariaControls === "radio") {
// hide the car div
document.getElementById("cat").classList.add("hide");
}
//toggle the hide div on the controlled div
controlledAria.classList.toggle("hide");
}
//select all the buttons
const buttons = document.querySelectorAll("button");
//for each button add an event listener when the button is clicked run the handle click function
buttons.forEach(button => button.addEventListener("click", handleClick))
.hide {
display: none;
}
<div id="dialogue" class="hide">
<div class="room">
Room description here. What do you do?
<div class="buttons">
<button aria-controls="cat">Pet the cat.</button><br>
<div id="cat" class="hide">aw yeah kitty time</div>
<button aria-controls="radio">Turn on the radio.</button><br>
<div id="radio" class="hide">audio file and tracklist here
</div>
</div>
</div>
</div>
<span class="toggle"><button aria-controls="dialogue">[Open/close dialogue.]</button></span>

how to hide content div after page reloading

I am using this javascript for collapsing and expanding a div in which is some information. The div has class .info.
After page reloading, you can see first that the div is visible, but within a second, when the js is loaded, it disappears.
How can i achieve that when reloading the page, also at the very first second time the div is not visible?
$( document ).ready(function() {
var $accordionIO = $('.accordion .toggle-button');
$accordionIO.prev('div').hide();
$(".accordion .toggle-button").click(function () {
//Inner
var jqInner = $('.info', $(this).parent());
if (jqInner.is(":visible"))
{
jqInner.slideUp();
$(this).find('.button-switch').html('Information');
}
else
{
jqInner.slideDown();
$(this).find('.button-switch').html('Close');
}
});
});
The html:
<!-- Start toggle script -->
<div class="accordion">
<div class="info">
<?php
include('includes/information.txt');
?>
</div>
<div class="toggle-button"><span class="button-switch">Information</span> </div>
</div>
Please try adding inline style attribute. See example below:
<div style="display:none;"></div>

Clear part of div

This pop-up-category has height 0. When button is pressed, i am adding height 100%. Inside have pop-up-wrap-category div where my data is stored.
Also have div for user controls ( Close pop-up).
<div class="pop-up-category">
<div class="pop-up-wrap-category">
<p>clear just this content</p>
//this this should be still visible(populated)
<div class="user-controls">
<span class="close-popup btn btn-danger">Close</span>
</div>
</div>
</div>
js :
$(document).on("click", ".close-popup", function () {
// console.log("sdasd");
$('.pop-up-wrap-category').empty();
});
How to clear content from pop-up-wrap-category but users controls still stay visible ?
Find the p and clear p
$(document).on("click", ".close-popup", function () {
// console.log("sdasd");
$('.pop-up-wrap-category > p').empty(); //use .remove() if you want to get the p tag deleted from DOM
});

Load a new div into exiting div with load more button

I wanna like that some plugin just one thing must be different there is have 2 links for 2 div i wanna show there example 10 div but with only one button like "Load More" how i can do this ?
html
Click1
Click2
<div id="outer">
<div id="inner">Initial content</div>
</div>
<div style="display:none" id="hidden1">After click event showing hidden 1</div>
<div style="display:none" id="hidden2">After click event showing hidden 2</div>
Js
$(document).ready(function() {
$('.link').click(function()
{
var id = $(this).attr('href');
$('#inner').fadeOut('slow', function() {
$('#inner').html($(id).html());
$('#inner').fadeIn('slow');
})
})
})
CSS
#hideMsg{
text-align:center;
padding-top:10px;
}
http://jsfiddle.net/G5qGs/2/
You can do it something like this.
Create a load more button
Load More
Use javascript like below
var count = 1;
$('#loadmore').click(function() {
$('#inner').fadeOut('slow', function() {
$('#inner').html($("#hidden" + count).html());
$('#inner').fadeIn('slow');
count++;
})
});
Working example
http://jsfiddle.net/G5qGs/25/
P.S : You might want to display "No more content" at the end. that can be achieved using a simple if else condition

Show/hide text by spiting it with html comment in div

How can i split some text in div using html comment.
Lats say i haw:
<div id="id1">Some first text <!--more--> here.</div>
<a id=id1>Show/Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a id=id1>Show/Hide</a>
I wont a jquery or javascript to show or hide text after<!--more-->.
Thanks
You can try something like this:
Given markup:
<div id="id1">Some first text <!--more--> here.</div>
<a>Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a>Hide</a>​
Add the following javascript:
//1. On page load, wrap text to be hidden in <span>
$(function() {
$("div").each(function() {
var html = $(this).html();
$(this).html(html.replace('<!--more-->', '<span class="hiddenText">', html) + '</span>');
});
// 2. Toggle visibility of span tags when clicking link
$('a').click(function() {
if ($(this).html() == 'Hide') {
$(this).prev('div').children('.hiddenText').hide();
$(this).html('Show');
} else {
$(this).prev('div').children('.hiddenText').show();
$(this).html('Hide');
}
});
});
Check my jsFiddle for a working example.
UPDATE: Updated solution to not rely on separate CSS class to hide/show text.

Categories