Has anyone figured out how to use twitter bootstrap collapse plugin where some text is shown (say, 100 characters) and you click a button to expand the text to show the rest of it?
Here's a JSFiddle that demonstrates the following issues I'm having:
The hidden text is shown on a new line. Would be preferable if sentences wouldn't be visually disrupted.
the icon-plus-sign indicator's display isn't toggled (doesn't go away on showing hidden text and re-appear vice versa).
Fully working HTML:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<div class="" data-toggle="collapse" data-target="#div1" >
<span><b>Div1:</b> This is a sentence at the end of the first 100 characters that gets truncated </span>
<i class='icon-plus-sign'></i>
</div>
<div id="div1" class="collapse" >such that characters 101 to infinity are not shown inline with the beginning of the sentence (<b>Div1</b>).</div>
<div class="" data-toggle="collapse" data-target="#div2" >
<span><b>Div2:</b>This is a sentence at the end of the first 100 characters that gets truncated </span>
<i class='icon-plus-sign'></i>
</div>
<div id="div2" class="collapse" >such that characters 101 to infinity are not shown inline with the beginning of the sentence (<b>Div2</b>).</div>
I got this to work by adding the following JavaScript:
$("div").on("hide", function() {
$(this).prev("div").find("i").attr("class","icon-plus-sign");
$(this).css("display","");
$(this).css("height","5px");
});
$("div").on("show", function() {
$(this).prev("div").find("i").attr("class","icon-minus-sign");
$(this).css("display","inline");
$(this).css("height","5px");
});
And the following CSS:
div[data-toggle="collapse"] {
float: left;
}
Example fiddle is here.
Sidenote
I personally would not use the Bootstrap collapse plugin for this. I would use a dedicated plugin like JQuery Expander in combination with Bootstrap icons.
A different example fiddle is here.
I agree with the other post that the collapse plugin is not meant for this. It is actually quite easy to write something that handles this nicely. For example, by wrapping the hidden text in <span class="truncated">:
<p>
This is the visible part <span class="truncated">this is the hidden part.</span>
</p>
Then hide it, append the hide/show icon, and toggle state:
$('.truncated').hide() // Hide the text initially
.after('<i class="icon-plus-sign"></i>') // Create toggle button
.next().on('click', function(){ // Attach behavior
$(this).toggleClass('icon-minus-sign') // Swap the icon
.prev().toggle(); // Hide/show the text
});
This takes advantage of the priority of the icon-minus-sign class over the icon-plus-sign one, but you can add in a toggle for both if it makes you feel safer.
Demo: http://jsfiddle.net/VNdmZ/4/
Related
My issue involves multiple DIVs that display:block or display:none each with their own anchor tag. The main problem is that I have recommissioned the JS code that runs this feature without completely understanding it. All I need is a way to toggle all of the DIVs with a single "Show All/Hide All" link. I cannot wrap my head around it.
I have tried absolutely everything that my exceptionally limited grasp will allow - which consists mostly of swinging my arms in the dark and hoping I accidently build a miracle. Since that hasn't worked I am shamefully seeking help.
The only thing that makes this question unique are all the variables with this specific issue -
An (almost) working example can be found at: www.robertmeans.com/menu.htm
The JS code:
imageX01='plus';
imageX02='plusEven';
function toggleOdd(ee){
imgX="imagePM"+ee;
divX="div"+ee;
imageX="imageX"+ee;
divLink="divHref"+ee;
imageXval=eval("imageX"+ee);
element = document.getElementById(divX).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageXval=='plus') {document.getElementById(imgX).src='_images/minus.gif';eval("imageX"+ee+"='minus';");document.getElementById(divLink).title='Hide Content';}
else {document.getElementById(imgX).src='_images/plus.gif';eval("imageX"+ee+"='plus';");document.getElementById(divLink).title='Show Content';}
}
function toggleEven(ee){
imgX="imagePM"+ee;
divX="div"+ee;
imageX="imageX"+ee;
divLink="divHref"+ee;
imageXval=eval("imageX"+ee);
element = document.getElementById(divX).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageXval=='plusEven') {document.getElementById(imgX).src='_images/minusEven.gif';eval("imageX"+ee+"='minusEven';");document.getElementById(divLink).title='Hide Content';}
else {document.getElementById(imgX).src='_images/plusEven.gif';eval("imageX"+ee+"='plusEven';");document.getElementById(divLink).title='Show Content';}
}
The HTML
<div id="task_item01">
<img src="_images/plus.gif" alt="" name="imagePM01" width="33" height="33" border="0" class="task_itemPlusImage" id="imagePM01" />
Div #1
</div>
<div style="display:none;" id="div01">
Content 1
</div>
<!-- ******************************** Item 1 End **************************** -->
<!-- ******************************** Item 2 Start ************************** -->
<div id="task_item02">
<img src="_images/plusEven.gif" alt="" name="imagePM01" width="33" height="33" border="0" class="task_itemPlusImage" id="imagePM02" />
Div #2
</div>
<div style="display:none;" id="div02">
Content 2
</div>
I have spent countless hours trying to work this out on my own. Any help is deeply appreciated.
Ok first of all, it seems like way too much code to me... you can do this very easily by using jQuery. I have made an example here: http://jsfiddle.net/Nr2f6/4/
Here is some simple html to help you better understand what is being done:
<div id="item-1"><span class="plus"></span>Open these items</div>
<div class="contents" data-rel="item-1">
I have superb items in this div... the world is about to understand just how awesome I am!
</div>
<div id="item-2"><span class="plus"></span>Open these other items</div>
<div class="contents" data-rel="item-2">
I have amazing contents in this div. I want to show them to the world!
</div>
as you can see above, there is no inline css. All the styling (display: none) should be placed separately, to not conflict with what you are trying to do. So simply place it in a separate css file.Then run this code:
$("div[id^=item]").click(function(){
var reference2open = $(this).attr("id");
//get the data-rel attribute associated
$("div[data-rel='"+reference2open+"']").slideToggle();
$("span",this).toggleClass('minus');
});
$("#all").click(function(){
if($(this).hasClass('close')){
$("div[data-rel^=item]").slideUp();
$("div[id^=item] span").removeClass('minus');
$("#all").removeClass('close');
$("#all").html('open them all');
}else{
//open and close them all by clicking
$("div[data-rel^=item]").each(function(){
if($(this).is(':hidden')){
$(this).slideDown();
$("div[id^=item] span").addClass('minus');
$("#all").html('close them all');
}
});
//change the button to close
$("#all").addClass('close');
}
//$("div[id^=item] span").toggleClass('minus');
});
****ADDED IN THE TOGGLE PLUS AND MINUS SIGNS USING CSS****
.plus{
background: url(http://www.robertmeans.com/offsite_files/code_help/_images/plus.gif);
width: 33px;
height: 33px;
display: inline-block;
}
.minus{
background: url(http://www.robertmeans.com/offsite_files/code_help/_images/minus.gif);
width: 33px;
height: 33px;
display: inline-block;
}
Do not forget to include your jQuery file! Hope this helps :)
Just wanted to add in some details for better understanding:
div[id^=item]: Is saying whenever a div is clicked that has an id that starts with (^=) item, run the code.
$("div[data-rel='"+reference2open+"']").slideToggle(): is saying take the id from the div that was clicked and find the content box where with the same name but in the data-rel attribute. The slide it down, if it is already down, slide it back up (toggle). You do not have to use a slide effect, I just thought it was more fun!
Then last but not least, the function you were looking for: How to open them all at once. Again we are using the (^=) to find all of the divs.
$("div[data-rel^=item").slideToggle();: So here we are saying to jQuery, hey toggle all the boxes that have a data-rel attribute that starts with (^=) item.
This last part is pretty neat, because you can create many instances of the item-? boxes and this code will work for any number of them. You can also add the same code to a different div, like even and odd, and toggle all the even and all the odd elements accordingly.
You could assign a specific class to all the things you want to toggle, then loop through all of them with a toggle function.
I'm working on a js script which will show / hide multiple divs based on css class, seemingly pretty simple. I set out to find an example of this and found something close in the article linked below. I used the code in the following link as a starting point.
Show/hide multiple divs using JavaScript
In my modified code (shown below) I am able to hide all (which is errant) and show all (which works correctly. I'm not sure why its not targeting the CSS class "red, green or blue" correctly. If I hard one of the class names in the script it works as expected, so I'm fairly certain I'm having an issue in the way I'm referencing the css targets themselves.
I am able to hide all and show all, yet I'm having difficulty showing only the selected class.
Here is the jsFiddle I'm working with: http://jsfiddle.net/juicycreative/WHpXz/4/
My code is below.
JavaScript
$('.categories li a').click(function () {
$('.marker').hide();
$((this).attr('target')).show();
});
$('#cat-show').click(function () {
$('.marker').show();
});
HTML
<ul class="categories">
<li id="cat-show" class="cat-col1" target="all" >All</li>
<li id="cat-models" class="cat-col1" target="red" >Model Homes</li>
<li id="cat-schools" class="cat-col1" target="blue">Schools</li>
<li id="cat-hospital" class="cat-col1" target="green" >Hospitals</li>
</ul>
<div id="locator">
<div id="overview-00" class="marker models" title="Maracay Homes<br />at Artesian Ranch"></div>
<!--SCHOOLS-->
<div id="overview-01" class="marker red" title="Perry High School">1</div>
<div id="overview-02" class="marker red" title="Payne Jr. High School">2</div>
<div id="overview-03" class="marker blue" title="Hamilton Prep">3</div>
<div id="overview-04" class="marker blue" title="Ryan Elementary">4</div>
<div id="overview-05" class="marker green" title="Chandler Traditional – Freedom">5</div>
</div>
Thanks in advance for any responses.
$((this).attr('target')).show();
This is syntactically incorrect. It should be $($(this).attr('target'))
However that's no good either because this is the anchor element that does not have the target. Use $(this).closest('li').attr('target') (or add the target to the <a>).
This is also semantically incorrect as that would interpolate to $("red") which would try to look for a <red> element.
$("." + $(this).closest('li').attr('target'))
http://jsfiddle.net/WHpXz/5/
You are almost there. This is the line that needs tweaking: $((this).attr('target')).show();
$(this) actually refers to the current anchor tag that was clicked. Since the anchor tag doesn't have the target attribute, you need to go up to the parent.
From there, you can get the target and add the '.' to the color to use as a selector.
var catToShow = $(this).parent().attr('target');
$('.' + catToShow).show();
I've edited your fiddle. Give it a shot.
http://jsfiddle.net/juicycreative/WHpXz/4/
I have searched a lot and couldn't found the approach to create the small text box right next to the cursor, when doing hover over on HTML object.
Example http://guyzyl.org/wp/Picture1.png
You can see cursor is not visible in this example, but the text box appears on hover over. I would like to create some thing similar.
Example is taken from the Facebook.
Thanks for the help
tooltips can be obtained on tags adding the title attribute to them, e.g.:
my link
fancier looking tooltips can be obtained using javascript but the above is the correct semantic option (many tooltip plugins expect it to be in your code anyway)
Use this :
<img title="my tooltip" src="" alt=""/>
It's called tooltip. write like this for example:
<div class="parent">
<p>create group</p>
<div class="tooltip">tooltip</div>
</div>
CSS
.tooltip{
display:none;
}
.parent:hover .tooltip{display:block;}
Check this http://jsfiddle.net/zDLzF/
There are many fancy tooltips available. The Simplest jQuery Tooltip Ever - http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
I have a bunch of elements (code-blocks) I'd like to be able to collapse using twitter-bootstrap's javascript, such as
some text
<div class="highlight">
code code
</div>
some more text text
<div class="highlight">
code code
</div>
I can add the following javascript to make all of these elements collapse:
$('highlight').collapse({
toggle: true
})
Now I'd like to add a button to toggle the collapse/show for these elements. Any ideas?
Solution requirements
I'm looking for a solution that
extends but doesn't have to change the original html with the code blocks. For instance, I cannot add ids to the 'highlight' divs or more divs around the code blocks.
In a similar goal, I'd like it to apply to all highlight class divs.
Note that using the normal collapse class from twitter bootstrap, such as:
toggle
<div class="collapse" id="#block1">
code code
</div>
doesn't gneralize in this way, since it needs ids, and if they are repeated, it only toggles the first one
twitter bootstrap uses jQuery behind the scenes so you should just be able to add a button, then add a click event to collapse the code blocks.
<input type="button" value="show/hide" id="toggle_code" />
$(function(){
$('#toggle_code').click(function(){
$('.highlight').collapse({
toggle: true
})
});
});
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});