Thread: Target an element after on click event appends it to a different location in the DOM

Perhaps a little clarification would help. Are you trying to make the next element in the class visible, while removing the visible class from the current element?

Originally Posted by freginold

Apologies for the formatting... getting used to this forum's posting format.

It’s not very obvious but you can use the [ICODE][/ICODE] BB tags to format code inline.

Your structure seems to be broken as you are nesting them instead of having them siblings, seems like you're missing a LOT of </div>... would also help if the indentation made the least bit of sense...

Though the train wreck of "bootcrap meets jquery" is likely a good chunk of what's fighting you here. For the life of me I can't even figure out what it is you're trying to do...

If we properly format your markup, your nesting... did you accidentally forget some </div> in there because where you have:

Code:

<div class="row image-row">
	<div class="small-12 medium-3 large-3 columns">
		<div class="pImage">
			<img src="#">
			<span>+</span> </div>	  
		</div>
		<div class="pTeaser hidden">
			<h2 class="profile-names white">Name 1</h2>
			<p>Profile</p>
		</div>
		<div class="small-12 medium-3 large-3 columns">
			<div class="pImage">
				<img src="#">
				<span>+</span> </div>	  
			</div>
			<div class="pTeaser hidden">
				<h2 class="profile-names white">Name 2</h2>
				<p>Profile 2</p>
			</div> 
			<div class="small-12 medium-3 large-3 columns">
				<div class="pImage">
					<img src="#">
					<span>+</span> </div>
				</div>
				<div class="pTeaser hidden">
					<h2 class="profile-names white">Name 3</h2>
					<p>Profile 3</p>
				</div>
				<div class="small-12 medium-3 large-3 columns">
					<div class="pImage">
						<img src="#">
						<span>+</span> </div>			  
					</div>
					<div class="pTeaser hidden">
						<h2 class="profile-names white">Name 4</h2>
						<p>Profile 4</p>
					</div>
				</div>

I've got the sneaking suspicion you meant:

Code:

<div class="row image-row">
	<div class="small-12 medium-3 large-3 columns">
		<div class="pImage">
			<img src="#">
			<span>+</span> </div>	  
		</div>
		<div class="pTeaser hidden">
			<h2 class="profile-names white">Name 1</h2>
			<p>Profile</p>
		</div>
	</div>
	<div class="small-12 medium-3 large-3 columns">
		<div class="pImage">
			<img src="#">
			<span>+</span> </div>	  
		</div>
		<div class="pTeaser hidden">
			<h2 class="profile-names white">Name 2</h2>
			<p>Profile 2</p>
		</div> 
	</div>
	<div class="small-12 medium-3 large-3 columns">
		<div class="pImage">
			<img src="#">
			<span>+</span> </div>
		</div>
		<div class="pTeaser hidden">
			<h2 class="profile-names white">Name 3</h2>
			<p>Profile 3</p>
		</div>
	</div>
	<div class="small-12 medium-3 large-3 columns">
		<div class="pImage">
			<img src="#">
			<span>+</span> </div>			  
		</div>
		<div class="pTeaser hidden">
			<h2 class="profile-names white">Name 4</h2>
			<p>Profile 4</p>
		</div>
	</div>

Though all those endless pointless div and endless pointless classes make me want to punch someone in the face, but that's the ignorant mouth-breathing nonsense known as bootcrap for you; I'd highly suggest you go find a stick to scrape that off with before you track it all over your site's carpets.

Admittedly, I say the same thing about jquery...

I really have to ask, WHY would you append an existing element without removing it? That would create multiple instances in two places.... are you sure you didn't mean to clone it? Build a new one from scratch maybe?

I'm just not getting your usage scenario, and to be frank even the method used to build the markup doesnae make a whole lot of sense. It all reeks of spending more time focused on what it looks like in the markup than it does paying attention to semantics and meanings -- though again, that's bootcrap for you. I still fail to grasp how anyone qualified to make a website could ever even conceive of a legitimate reason to use that asshattery.

Originally Posted by deathshadow

I really have to ask, WHY would you append an existing element without removing it? That would create multiple instances in two places.... are you sure you didn't mean to clone it? Build a new one from scratch maybe?

I can only assume the OP wants to move the element to the parent/root element to position it or make it show up in a certain place. But whatever they try to do, there are most likely much simpler ways to achieve it.