How to add display:inline-block in a jQuery show() function?
JqueryShow HideJquery Problem Overview
I have some code like this:
function switch_tabs(obj) {
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#' + id).show();
obj.addClass("selected");
}
The show function adds display:block
. But I would like to add display:inline-block
instead of block.
Jquery Solutions
Solution 1 - Jquery
Instead of show
, try to use CSS to hide and show the content.
function switch_tabs(obj) {
$('.tab-content').css('display', 'none'); // you could still use `.hide()` here
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#' + id).css('display', 'inline-block');
obj.addClass("selected");
}
Solution 2 - Jquery
Setting the CSS property after you have used .show()
should work. Maybe you are targeting the wrong element on your HTML page.
$('#foo').css('display', 'inline-block');
But if you are not using any effects of .show(), .hide()
why don't you set those CSS properties manually like:
$('#foo').css('display','none');
$('#foo').css('display','inline-block');
Solution 3 - Jquery
Use css() just after show() or fadeIn() like this:
$('div.className').fadeIn().css('display', 'inline-block');
Solution 4 - Jquery
Razz's solution would work for the .hide()
and .show()
methods but would not work for the .toggle()
method.
Depending upon the scenario, having a css class .inline_block { display: inline-block; }
and calling $(element).toggleClass('inline_block')
solves the problem for me.
Solution 5 - Jquery
I did that
function showPanels() {
$('.panels').show("slow");
$('.panels').css('display','inline-block');
}
works like a charm.
Solution 6 - Jquery
You can use animate insted of show/hide
Something like this:
function switch_tabs(obj)
{
$('.tab-content').animate({opacity:0},3000);
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).animate({opacity:1},3000);
obj.addClass("selected");
}
Solution 7 - Jquery
try this:
$('#foo').show(0).css('display','inline-block');
Solution 8 - Jquery
I think you want both the animation and to set the display property at the end. In that case you better use show()
callback as shown below
$("#my_obj").show(400,function() {
$("#my_obj").css("display","inline-block")
}) ;
This way you will achieve both the results.
Solution 9 - Jquery
actually jQuery simply clears the value of the 'display' property, and doesn't set it to 'block' (see internal implementation of jQuery.showHide()) -
function showHide(elements, show) {
var display, elem, hidden,
...
if (show) {
// Reset the inline display of this element to learn if it is
// being hidden by cascaded rules or not
if (!values[index] && display === "none") {
elem.style.display = "";
}
...
if (!show || elem.style.display === "none" || elem.style.display === "") {
elem.style.display = show ? values[index] || "" : "none";
}
}
Please note that you can override $.fn.show()/$.fn.hide(); storing original display in element itself when hiding (e.g. as an attribute or in the $.data()); and then applying it back again when showing.
Also, using css important! will probably not work here - since setting a style inline is usually stronger than any other rule
Solution 10 - Jquery
<style>
.demo-ele{display:inline-block}
</style>
<div class="demo-ele" style="display:none">...</div>
<script>
$(".demo-ele").show(1000);//hide first, show with inline-block
<script>
Solution 11 - Jquery
The best .let it's parent display :inline-block
or add a parent div
what CSS only have display :inline-block
.
Solution 12 - Jquery
Best way is to add !important suffix to the selector .
Example:
#selector{
display: inline-block !important;
}