Change div CSS with click

Question

Change div CSS with click

Navigation

#1 by (0 votes)

2

I'm trying to create a portfolio, the idea of it is that by clicking on Banner, the Logos disappears and if you click on Logos again, it reappears and Banner adds. In case, clicking one of the buttons would disappear, adding the class display_n , which has the display property: none ;

.portfolio {
	padding-left: 25px;
	padding-right: 25px;
	display: inline-block;
	background-color:#090909;
	margin-top: 0px;
	width: 1298px;
	padding-bottom: 100px;
	
}
.portfolio h1 {
	color: rgb(226, 226, 226);
	font-size: 90px;
	text-align: center;
	
}
.box_button_port {
	width: 200px;
	margin-left: 50px;
	float: left;
}
.box_button_port p {
	color:aliceblue;
	font-size: 12px;
	margin-top:-10px;
}
.portfolio a { 
	text-decoration: none; 
}
.button_p {

	
	width: 126px;
	height: 46px;
	border: rgba(18,229,88,1.00) 1px solid;
	border-radius: 5px;
	background: none;
	color: white;
	font-size: 18px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	margin-bottom: 25px;
	cursor:pointer;
	
}
.button_p:hover {
	background:rgba(11, 236, 61, 0.63);
	
	-webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
}
.button_p:active {
	background: rgba(23,216,75,0.87);
}
.port_imgs {
	float: left;
	/* margin-top: -10px */
}
.display_n {
	display: none;
}
.port_logos img{
    max-width: 200px;
    max-height: 200px;
    margin-left: 80px;
    margin-top: 30px;
	/*border: rgba(18,229,88,1.00) 1px solid;
	padding: 30px;
	border-radius: 150px; */
}
.port_banners {
	float: left;
}
.port_banners img {
	max-width: 200px;
    max-height: 200px;
    margin-left: 80px;
    margin-top: 30px;
}
body {
background: #3D3D3D;
}

<script>
$('#logo').click(function() {
    $('#port_logos').addClass('display_n');
	$('#port_banners').removeClass('display_n');
}); 
 </script>
 <button class="button_p"  id="logo">
  Logos	
  </button>
   
    
    <button class="button_p">
  	Banners
		</button>
    
      <button class="button_p">
  	Facebook
		 </button>
      <button class="button_p">
  	Outros
	 </button>
		 <p> clique na imagem para visualizar </p>
   </div>
   <div class="port_imgs">
   <div class="port_logos" id="port_logos"> 
   <img src="https://i.imgur.com/g62Lq6K.png"><imgsrc="https://i.imgur.com/1oDuJ2n.png">
   <img src="https://i.imgur.com/5B1bmkq.png"></div><!--fimport_logos--><divclass="port_banners display_n" id="port_banners">
   		<img src="images/placeholder.jpg">
   	</div>
   </div><!-- fim port_imgs -->
 	
 </div> <!-- Fim portfolio -->

javascript html jquery css

asked by anonymous 19.10.2017 / 12:57

1 answer

execute function in before and after content Recursion- elemindices

score 0 · Answer 1

Just refer to them by the same class, and with each check if display_n has been set, also to have control the id of the button should be contained in the class of images, example ...

 $('.button_p').click(function() {

		var el = $(this).attr('id');
    
    $('.port').each(function(){
    	if($(this).hasClass(el)) {
      	$(this).removeClass('display_n');
      }else{
      	$(this).addClass('display_n');
      }
    })
});

.portfolio {
	padding-left: 25px;
	padding-right: 25px;
	display: inline-block;
	background-color:#090909;
	margin-top: 0px;
	width: 1298px;
	padding-bottom: 100px;
	
}
.portfolio h1 {
	color: rgb(226, 226, 226);
	font-size: 90px;
	text-align: center;
	
}
.box_button_port {
	width: 200px;
	margin-left: 50px;
	float: left;
}
.box_button_port p {
	color:aliceblue;
	font-size: 12px;
	margin-top:-10px;
}
.portfolio a { 
	text-decoration: none; 
}
.button_p {

	
	width: 126px;
	height: 46px;
	border: rgba(18,229,88,1.00) 1px solid;
	border-radius: 5px;
	background: none;
	color: white;
	font-size: 18px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	margin-bottom: 25px;
	cursor:pointer;
	
}
.button_p:hover {
	background:rgba(11, 236, 61, 0.63);
	
	-webkit-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-moz-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	-o-transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
	transition: color .25s linear, background-color .25s ease-in-out, border-color .25s ease-in-out;
}
.button_p:active {
	background: rgba(23,216,75,0.87);
}
.port_imgs {
	float: left;
	/* margin-top: -10px */
}
.display_n {
	display: none;
}
.port_logos img{
    max-width: 200px;
    max-height: 200px;
    margin-left: 80px;
    margin-top: 30px;
	/*border: rgba(18,229,88,1.00) 1px solid;
	padding: 30px;
	border-radius: 150px; */
}
.port_banners {
	float: left;
}
.port_banners img {
	max-width: 200px;
    max-height: 200px;
    margin-left: 80px;
    margin-top: 30px;
}
body {
background: #3D3D3D;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="ctnOpcoes">
       
       <button class="button_p" id="logo">
        Logos	
       </button>
       <button class="button_p" id="banner">
         Banners
       </button>
       <button class="button_p">
         Facebook
       </button>
       <button class="button_p">
         Outros
       </button>
       
     </div>
     
		 <p> clique na imagem para visualizar </p>

   <div class="port_imgs">
     <div class="port port_logos logo"> 
       <img src="https://i.imgur.com/g62Lq6K.png"><imgsrc="https://i.imgur.com/1oDuJ2n.png">
       <img src="https://i.imgur.com/5B1bmkq.png"></div><!--fimport_logos--><divclass="port port_banners display_n banner">
       <img src="https://fakeimg.pl/300/">
     </div>
   </div><!-- fim port_imgs -->