If div is visible, than show that content in other div with jQuery


Tags: jquery,html,css

Problem :

Is there a possible way to do this? I am not friendly with jQuery, and i dont have a clue how to do this properly.

I made JSFiddle demo.

I have two div classes. One is hidden, and other is visible. How to add hidden div to visible div, and make hidden div visible in visible div? I mean, that if hidden div has content, than both data should be visible in visible div.

HTML

<div class="content-hidden">hidden content</div>

<div class="content-visible">visible content</div>

CSS

.content-hidden { float:left; width:100px; height:100px; background:red; display:none; }

.content-visible { float:left; width:100px; height:100px; background:blue; }

jQuery

if($('.content-visible').is(':visible')) {
    // i dont know what to do next
}

Sorry for bad english, and thanks for any answers!



Solution :

If I understood correctly. You can try

if($('.content-visible').is(':visible')) {
    $('.content-hidden').show().appendTo('.content-visible')
}

DEMO

References

  1. appendTo().
  2. show().

    CSS Howto..

    How can i increase the round corner button width dynamically depends on the text size in CSS?

    How to set background color in border in CSS

    How to stylize second level dropdown menu list

    How can I place rotated text against a table with HTML and CSS?

    how to remove margin or padding of window in javascript/css?

    How to style a SVG using CSS in javaFX FXML

    How to animate a fixed div with jQuery without page scrollbar resetting to top

    How to avoid the text inside the bootstrap button overflow?

    how to see background color of div when if move on image

    How to prevent image in fluid container displayed cropped

    How can I toggle the background color of the body of my HTML document, with one button?

    How to move object into the screen from outside via jQuery transition

    How to vertical align the text inside a div in responsive layout

    How to make text input line up with button in IE7?

    Why will show() only work for fields that are hidden using inline css?

    How can I wrap text around a bottom-right div?

    How to create a div in the same size as the contained image. Both should be responsive

    How to make textfield stick to its label in extjs?

    How do I make text-transform:uppercase work properly with Greek?

    How to remove blue highlight when you hold on input buttons in css? [closed]

    How to apply CSS style for getting shadow for text area

    How to manage z-index of navigation menu?

    How can i use ng-class variable from controller?

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    How I can make nice looking matrix of buttons with bootstrap 3?

    How to get list of Css class use in the HTML file?

    How to hide the first element on the page with particular css class? [duplicate]

    How about taking out Bootstrap style? [closed]

    How to have images in line with text in css

    How to Align all inputs in a Form