2
Answers

hide & show div

Nikita

Nikita

4y
772
1
i have a bootstrap toggle button for map using checkbox. when i want to click on that toggle switch then map div will be show. And when we turn it to off(or is UNCHECKED) then my scroll bar card section will be expand and map will be hidden. here i share you code.
 
MAP TOOGLE SWITCH CODE
  1. <div id="maptoggle">  
  2. <div class="col-sm-4 mt-3 ">  
  3. <text class="map">MAP VIEW</text> <span>  
  4. <div class="custom-control custom-switch">  
  5. <input type="checkbox" class="custom-control-input" value="check"  
  6. id="customSwitches" checked>  
  7. <label class="custom-control-label" for="customSwitches"></label>  
  8. </div>  
  9. </span>  
  10. </div>  
  11. </div>  
CARD SECTION
  1. <div class="col-sm-5 col-md-5 allcard expandableCollapsibleDiv" id="all-card">  
  2. <div class="scroll1">  
  3. <div class="column">  
  4. <!--Card 1-->  
  5. <div class="card-active" id="card">  
  6. <div class="row no-gutters">  
  7. <div class="col-md-4" style="background: #868e96;">  
  8. <img src="..\bootstrap_navbar\assets\images\property-image\spire1.jpg"  
  9. class="card-img-top h-100" alt="image1">  
  10. </div>  
  11. <div class="col-md-8">  
  12. <div class="card-body">  
  13. <div class="row abc">  
  14. <div class="col-md-8">  
  15. <h5 class="card-title">The Spires</h5>  
  16. </div>  
  17. <div class="col-md-4 heart">  
  18. <img src="..\bootstrap_navbar\assets\images\heart.png"  
  19. class="img img-responsive">  
  20. </div>  
  21. </div>  
  22. <div class="row r10" style=" margin-top: -7px;">  
  23. <div class="col-md-6">  
  24. <p class="card-text">Starting From</p>  
  25. </div>  
  26. <div class="col-md-6 price">  
  27. <span><b>₹4.52 L</b></span>  
  28. </div>  
  29. </div>  
  30. <div class="row r11">  
  31. <div class="txt">  
  32. Min. 300 - Max. 600 Sq Ft  
  33. </div>  
  34. </div>  
  35. <hr class="card1">  
  36. <div class="row r12">  
  37. <div class="col-md-4 col12">  
  38. <text class="loc">Baner</text>  
  39. </div>  
  40. <div class="col-md-4 card-button">  
  41. <input type="text" value="2BHK" class="btn2">  
  42. <!-- <button type="button" class="btn2" style="margin-left: 30px;">  
  43. 2BHK</button>-->  
  44. </div>  
  45. <div class="col-md-4 card-button">  
  46. <input type="text" value="3BHK" class="btn2">  
  47. </div>  
  48. </div>  
  49. </div>  
  50. </div>  
  51. </div>  
  52. </div>  
  53. <!--Card 2-->  
  54. <div class="card" id="card2">  
  55. <div class="row no-gutters">  
  56. <div class="col-md-4" style="background: #868e96;">  
  57. <img src="..\bootstrap_navbar\assets\images\property-image\recosta.jpeg"  
  58. class="card-img-top h-100" alt="image1">  
  59. </div>  
  60. <div class="col-md-8">  
  61. <div class="card-body">  
  62. <div class="row abc">  
  63. <div class="col-md-8">  
  64. <h5 class="card-title">ReCosta</h5>  
  65. </div>  
  66. <div class="col-md-4 heart">  
  67. <img src="..\bootstrap_navbar\assets\images\heart.png"  
  68. class="img img-responsive">  
  69. </div>  
  70. </div>  
  71. <div class="row r10" style=" margin-top: -7px;">  
  72. <div class="col-md-6">  
  73. <p class="card-text">Starting From</p>  
  74. </div>  
  75. <div class="col-md-6 price">  
  76. <span><b>₹4.52 L</b></span>  
  77. </div>  
  78. </div>  
  79. <div class="row r11">  
  80. <div class="txt">  
  81. Min. 300 - Max. 600 Sq Ft  
  82. </div>  
  83. </div>  
  84. <hr class="card1">  
  85. <div class="row r12">  
  86. <div class="col-md-4 col12">  
  87. <text class="loc">Baner</text>  
  88. </div>  
  89. <div class="col-md-4 card-button">  
  90. <!-- <button type="button" class="btn2" style="margin-left: 30px;">  
  91. 2BHK</button> -->  
  92. <input type="text" value="2BHK" class="btn2">  
  93. </div>  
  94. <div class="col-md-4 card-button">  
  95. <!-- <button type="button" class="btn2"> 3BHK</button> -->  
  96. <input type="text" value="3BHK" class="btn2">  
  97. </div>  
  98. </div>  
  99. </div>  
  100. </div>  
  101. </div>  
  102. </div>  
  103. <!--Card 3-->  
  104. <div class="card" id="card3">  
  105. <div class="row no-gutters">  
  106. <div class="col-md-4" style="background: #868e96;">  
  107. <img src="..\bootstrap_navbar\assets\images\property-image\presidence.jpg"  
  108. class="card-img-top h-100" alt="image1">  
  109. </div>  
  110. <div class="col-md-8">  
  111. <div class="card-body">  
  112. <div class="row abc">  
  113. <div class="col-md-8">  
  114. <h5 class="card-title">The Presidence</h5>  
  115. </div>  
  116. <div class="col-md-4 heart">  
  117. <img src="..\bootstrap_navbar\assets\images\heart.png"  
  118. class="img img-responsive">  
  119. </div>  
  120. </div>  
  121. <div class="row r10" style=" margin-top: -7px;">  
  122. <div class="col-md-6">  
  123. <p class="card-text">Starting From</p>  
  124. </div>  
  125. <div class="col-md-6 price">  
  126. <span><b>₹4.52 L</b></span>  
  127. </div>  
  128. </div>  
  129. <div class="row r11">  
  130. <div class="txt">  
  131. Min. 300 - Max. 600 Sq Ft  
  132. </div>  
  133. </div>  
  134. <hr class="card1">  
  135. <div class="row r12">  
  136. <div class="col-md-4 col12">  
  137. <text class="loc">Baner</text>  
  138. </div>  
  139. <div class="col-md-4 card-button">  
  140. <!-- <button type="button" class="btn2" style="margin-left: 30px;">  
  141. 2BHK</button> -->  
  142. <input type="text" value="2BHK" class="btn2">  
  143. </div>  
  144. <div class="col-md-4 card-button">  
  145. <!-- <button type="button" class="btn2"> 3BHK</button> -->  
  146. <input type="text" value="3BHK" class="btn2">  
  147. </div>  
  148. </div>  
  149. </div>  
  150. </div>  
  151. </div>  
  152. </div>  
  153. <!--Card 4-->  
  154. <div class="card" id="card4">  
  155. <div class="row no-gutters">  
  156. <div class="col-md-4" style="background: #868e96;">  
  157. <img src="..\bootstrap_navbar\assets\images\property-image\spir2.jpg"  
  158. class="card-img-top h-100" alt="image1">  
  159. </div>  
  160. <div class="col-md-8">  
  161. <div class="card-body">  
  162. <div class="row abc">  
  163. <div class="col-md-8">  
  164. <h5 class="card-title">The Spires</h5>  
  165. </div>  
  166. <div class="col-md-4 heart">  
  167. <img src="..\bootstrap_navbar\assets\images\heart.png"  
  168. class="img img-responsive">  
  169. </div>  
  170. </div>  
  171. <div class="row r10" style=" margin-top: -7px;">  
  172. <div class="col-md-6">  
  173. <p class="card-text">Starting From</p>  
  174. </div>  
  175. <div class="col-md-6 price">  
  176. <span><b>₹4.52 L</b></span>  
  177. </div>  
  178. </div>  
  179. <div class="row r11">  
  180. <div class="txt">  
  181. Min. 300 - Max. 600 Sq Ft  
  182. </div>  
  183. </div>  
  184. <hr class="card1">  
  185. <div class="row r12">  
  186. <div class="col-md-4 col-12">  
  187. <text class="loc">Baner</text>  
  188. </div>  
  189. <div class="col-md-4 card-button">  
  190. <!-- <button type="button" class="btn2" style="margin-left: 30px;">  
  191. 2BHK</button> -->  
  192. <input type="text" value="2BHK" class="btn2">  
  193. </div>  
  194. <div class="col-md-4 card-button">  
  195. <!-- <button type="button" class="btn2"> 3BHK</button> -->  
  196. <input type="text" value="3BHK" class="btn2">  
  197. </div>  
  198. </div>  
  199. </div>  
  200. </div>  
  201. </div>  
  202. </div>  
  203. <!--Card 5-->  
  204. <div class="card" id="card5">  
  205. <div class="row no-gutters">  
  206. <div class="col-md-4" style="background: #868e96;">  
  207. <img src="..\bootstrap_navbar\assets\images\property-image\recosta2.jpg"  
  208. class="card-img-top h-100" alt="image1">  
  209. </div>  
  210. <div class="col-md-8">  
  211. <div class="card-body">  
  212. <div class="row abc">  
  213. <div class="col-md-8">  
  214. <h5 class="card-title">ReCosta</h5>  
  215. </div>  
  216. <div class="col-md-4 heart">  
  217. <img src="..\bootstrap_navbar\assets\images\heart.png"  
  218. class="img img-responsive">  
  219. </div>  
  220. </div>  
  221. <div class="row r10" style=" margin-top: -7px;">  
  222. <div class="col-md-6">  
  223. <p class="card-text">Starting From</p>  
  224. </div>  
  225. <div class="col-md-6 price">  
  226. <span><b>₹4.52 L</b></span>  
  227. </div>  
  228. </div>  
  229. <div class="row r11">  
  230. <div class="txt">  
  231. Min. 300 - Max. 600 Sq Ft  
  232. </div>  
  233. </div>  
  234. <hr class="card1">  
  235. <div class="row r12">  
  236. <div class="col-md-4 col12">  
  237. <text class="loc">Baner</text>  
  238. </div>  
  239. <div class="col-md-4 card-button">  
  240. <!-- <button type="button" class="btn2" style="margin-left: 30px;">  
  241. 2BHK</button> -->  
  242. <input type="text" value="2BHK" class="btn2">  
  243. </div>  
  244. <div class="col-md-4 card-button">  
  245. <!-- <button type="button" class="btn2"> 3BHK</button> -->  
  246. <input type="text" value="3BHK" class="btn2">  
  247. </div>  
  248. </div>  
  249. </div>  
  250. </div>  
  251. </div>  
  252. </div>  
  253. <!--Card 6-->  
  254. <div class="card" id="card6">  
  255. <div class="row no-gutters">  
  256. <div class="col-md-4" style="background: #868e96;">  
  257. <img src="..\bootstrap_navbar\assets\images\property-image\presidence2.jpg"  
  258. class="card-img-top h-100" alt="image1">  
  259. </div>  
  260. <div class="col-md-8">  
  261. <div class="card-body">  
  262. <div class="row abc">  
  263. <div class="col-md-8">  
  264. <h5 class="card-title">The Presidence</h5>  
  265. </div>  
  266. <div class="col-md-4 heart">  
  267. <img src="..\bootstrap_navbar\assets\images\heart.png"  
  268. class="img img-responsive">  
  269. </div>  
  270. </div>  
  271. <div class="row r10" style=" margin-top: -7px;">  
  272. <div class="col-md-6">  
  273. <p class="card-text">Starting From</p>  
  274. </div>  
  275. <div class="col-md-6 price">  
  276. <span><b>₹4.52 L</b></span>  
  277. </div>  
  278. </div>  
  279. <div class="row r11">  
  280. <div class="txt">  
  281. Min. 300 - Max. 600 Sq Ft  
  282. </div>  
  283. </div>  
  284. <hr class="card1">  
  285. <div class="row r12">  
  286. <div class="col-md-4 col12">  
  287. <text class="loc">Baner</text>  
  288. </div>  
  289. <div class="col-md-4 card-button">  
  290. <!-- <button type="button" class="btn2" style="margin-left: 30px;">  
  291. 2BHK</button> -->  
  292. <input type="text" value="2BHK" class="btn2">  
  293. </div>  
  294. <div class="col-md-4 card-button">  
  295. <!-- <button type="button" class="btn2"> 3BHK</button> -->  
  296. <input type="text" value="3BHK" class="btn2">  
  297. </div>  
  298. </div>  
  299. </div>  
  300. </div>  
  301. </div>  
  302. </div>  
  303. <!--Card 7-->  
  304. <div class="card-active" id="card1">  
  305. <div class="row no-gutters">  
  306. <div class="col-md-4" style="background: #868e96;">  
  307. <img src="..\bootstrap_navbar\assets\images\property-image\spire1.jpg"  
  308. class="card-img-top h-100" alt="image1">  
  309. </div>  
  310. <div class="col-md-8">  
  311. <div class="card-body">  
  312. <div class="row abc">  
  313. <div class="col-md-8">  
  314. <h5 class="card-title">The Spires</h5>  
  315. </div>  
  316. <div class="col-md-4 heart">  
  317. <img src="..\bootstrap_navbar\assets\images\heart.png"  
  318. class="img img-responsive">  
  319. </div>  
  320. </div>  
  321. <div class="row r10" style=" margin-top: -7px;">  
  322. <div class="col-md-6">  
  323. <p class="card-text">Starting From</p>  
  324. </div>  
  325. <div class="col-md-6 price">  
  326. <span><b>₹4.52 L</b></span>  
  327. </div>  
  328. </div>  
  329. <div class="row r11">  
  330. <div class="txt">  
  331. Min. 300 - Max. 600 Sq Ft  
  332. </div>  
  333. </div>  
  334. <hr class="card1">  
  335. <div class="row r12">  
  336. <div class="col-md-4 col12">  
  337. <text class="loc">Baner</text>  
  338. </div>  
  339. <div class="col-md-4 card-button">  
  340. <input type="text" value="2BHK" class="btn2">  
  341. <!-- <button type="button" class="btn2" style="margin-left: 30px;">  
  342. 2BHK</button>-->  
  343. </div>  
  344. <div class="col-md-4 card-button">  
  345. <input type="text" value="3BHK" class="btn2">  
  346. </div>  
  347. </div>  
  348. </div>  
  349. </div>  
  350. </div>  
  351. </div>  
  352. <!--Card 8-->  
  353. <div class="card" id="card8">  
  354. <div class="row no-gutters">  
  355. <div class="col-md-4" style="background: #868e96;">  
  356. <img src="..\bootstrap_navbar\assets\images\property-image\recosta.jpeg"  
  357. class="card-img-top h-100" alt="image1">  
  358. </div>  
  359. <div class="col-md-8">  
  360. <div class="card-body">  
  361. <div class="row abc">  
  362. <div class="col-md-8">  
  363. <h5 class="card-title">ReCosta</h5>  
  364. </div>  
  365. <div class="col-md-4 heart">  
  366. <img src="..\bootstrap_navbar\assets\images\heart.png"  
  367. class="img img-responsive">  
  368. </div>  
  369. </div>  
  370. <div class="row r10" style=" margin-top: -7px;">  
  371. <div class="col-md-6">  
  372. <p class="card-text">Starting From</p>  
  373. </div>  
  374. <div class="col-md-6 price">  
  375. <span><b>₹4.52 L</b></span>  
  376. </div>  
  377. </div>  
  378. <div class="row r11">  
  379. <div class="txt">  
  380. Min. 300 - Max. 600 Sq Ft  
  381. </div>  
  382. </div>  
  383. <hr class="card1">  
  384. <div class="row r12">  
  385. <div class="col-md-4 col12">  
  386. <text class="loc">Baner</text>  
  387. </div>  
  388. <div class="col-md-4 card-button">  
  389. <!-- <button type="button" class="btn2" style="margin-left: 30px;">  
  390. 2BHK</button> -->  
  391. <input type="text" value="2BHK" class="btn2">  
  392. </div>  
  393. <div class="col-md-4 card-button">  
  394. <!-- <button type="button" class="btn2"> 3BHK</button> -->  
  395. <input type="text" value="3BHK" class="btn2">  
  396. </div>  
  397. </div>  
  398. </div>  
  399. </div>  
  400. </div>  
  401. </div>  
  402. <!--Card 9-->  
  403. <div class="card" id="card9">  
  404. <div class="row no-gutters">  
  405. <div class="col-md-4" style="background: #868e96;">  
  406. <img src="..\bootstrap_navbar\assets\images\property-image\presidence.jpg"  
  407. class="card-img-top h-100" alt="image1">  
  408. </div>  
  409. <div class="col-md-8">  
  410. <div class="card-body">  
  411. <div class="row abc">  
  412. <div class="col-md-8">  
  413. <h5 class="card-title">The Presidence</h5>  
  414. </div>  
  415. <div class="col-md-4 heart">  
  416. <img src="..\bootstrap_navbar\assets\images\heart.png"  
  417. class="img img-responsive">  
  418. </div>  
  419. </div>  
  420. <div class="row r10" style=" margin-top: -7px;">  
  421. <div class="col-md-6">  
  422. <p class="card-text">Starting From</p>  
  423. </div>  
  424. <div class="col-md-6 price">  
  425. <span><b>₹4.52 L</b></span>  
  426. </div>  
  427. </div>  
  428. <div class="row r11">  
  429. <div class="txt">  
  430. Min. 300 - Max. 600 Sq Ft  
  431. </div>  
  432. </div>  
  433. <hr class="card1">  
  434. <div class="row r12">  
  435. <div class="col-md-4 col12">  
  436. <text class="loc">Baner</text>  
  437. </div>  
  438. <div class="col-md-4 card-button">  
  439. <!-- <button type="button" class="btn2" style="margin-left: 30px;">  
  440. 2BHK</button> -->  
  441. <input type="text" value="2BHK" class="btn2">  
  442. </div>  
  443. <div class="col-md-4 card-button">  
  444. <!-- <button type="button" class="btn2"> 3BHK</button> -->  
  445. <input type="text" value="3BHK" class="btn2">  
  446. </div>  
  447. </div>  
  448. </div>  
  449. </div>  
  450. </div>  
  451. </div>  
  452. <!--Card 10-->  
  453. <div class="card" id="card10">  
  454. <div class="row no-gutters">  
  455. <div class="col-md-4" style="background: #868e96;">  
  456. <img src="..\bootstrap_navbar\assets\images\property-image\spir2.jpg"  
  457. class="card-img-top h-100" alt="image1">  
  458. </div>  
  459. <div class="col-md-8">  
  460. <div class="card-body">  
  461. <div class="row abc">  
  462. <div class="col-md-8">  
  463. <h5 class="card-title">The Spires</h5>  
  464. </div>  
  465. <div class="col-md-4 heart">  
  466. <img src="..\bootstrap_navbar\assets\images\heart.png"  
  467. class="img img-responsive">  
  468. </div>  
  469. </div>  
  470. <div class="row r10" style=" margin-top: -7px;">  
  471. <div class="col-md-6">  
  472. <p class="card-text">Starting From</p>  
  473. </div>  
  474. <div class="col-md-6 price">  
  475. <span><b>₹4.52 L</b></span>  
  476. </div>  
  477. </div>  
  478. <div class="row r11">  
  479. <div class="txt">  
  480. Min. 300 - Max. 600 Sq Ft  
  481. </div>  
  482. </div>  
  483. <hr class="card1">  
  484. <div class="row r12">  
  485. <div class="col-md-4 col-12">  
  486. <text class="loc">Baner</text>  
  487. </div>  
  488. <div class="col-md-4 card-button">  
  489. <!-- <button type="button" class="btn2" style="margin-left: 30px;">  
  490. 2BHK</button> -->  
  491. <input type="text" value="2BHK" class="btn2">  
  492. </div>  
  493. <div class="col-md-4 card-button">  
  494. <!-- <button type="button" class="btn2"> 3BHK</button> -->  
  495. <input type="text" value="3BHK" class="btn2">  
  496. </div>  
  497. </div>  
  498. </div>  
  499. </div>  
  500. </div>  
  501. </div>  
  502. <!--Card 11-->  
  503. <div class="card" id="card11">  
  504. <div class="row no-gutters">  
  505. <div class="col-md-4" style="background: #868e96;">  
  506. <img src="..\bootstrap_navbar\assets\images\property-image\recosta2.jpg"  
  507. class="card-img-top h-100" alt="image1">  
  508. </div>  
  509. <div class="col-md-8">  
  510. <div class="card-body">  
  511. <div class="row abc">  
  512. <div class="col-md-8">  
  513. <h5 class="card-title">ReCosta</h5>  
  514. </div>  
  515. <div class="col-md-4 heart">  
  516. <img src="..\bootstrap_navbar\assets\images\heart.png"  
  517. class="img img-responsive">  
  518. </div>  
  519. </div>  
  520. <div class="row r10" style=" margin-top: -7px;">  
  521. <div class="col-md-6">  
  522. <p class="card-text">Starting From</p>  
  523. </div>  
  524. <div class="col-md-6 price">  
  525. <span><b>₹4.52 L</b></span>  
  526. </div>  
  527. </div>  
  528. <div class="row r11">  
  529. <div class="txt">  
  530. Min. 300 - Max. 600 Sq Ft  
  531. </div>  
  532. </div>  
  533. <hr class="card1">  
  534. <div class="row r12">  
  535. <div class="col-md-4 col12">  
  536. <text class="loc">Baner</text>  
  537. </div>  
  538. <div class="col-md-4 card-button">  
  539. <!-- <button type="button" class="btn2" style="margin-left: 30px;">  
  540. 2BHK</button> -->  
  541. <input type="text" value="2BHK" class="btn2">  
  542. </div>  
  543. <div class="col-md-4 card-button">  
  544. <!-- <button type="button" class="btn2"> 3BHK</button> -->  
  545. <input type="text" value="3BHK" class="btn2">  
  546. </div>  
  547. </div>  
  548. </div>  
  549. </div>  
  550. </div>  
  551. </div>  
  552. <!--Card 12-->  
  553. <div class="card" id="card12">  
  554. <div class="row no-gutters">  
  555. <div class="col-md-4" style="background: #868e96;">  
  556. <img src="..\bootstrap_navbar\assets\images\property-image\presidence2.jpg"  
  557. class="card-img-top h-100" alt="image1">  
  558. </div>  
  559. <div class="col-md-8">  
  560. <div class="card-body">  
  561. <div class="row abc">  
  562. <div class="col-md-8">  
  563. <h5 class="card-title">The Presidence</h5>  
  564. </div>  
  565. <div class="col-md-4 heart">  
  566. <img src="..\bootstrap_navbar\assets\images\heart.png"  
  567. class="img img-responsive">  
  568. </div>  
  569. </div>  
  570. <div class="row r10" style=" margin-top: -7px;">  
  571. <div class="col-md-6">  
  572. <p class="card-text">Starting From</p>  
  573. </div>  
  574. <div class="col-md-6 price">  
  575. <span><b>₹4.52 L</b></span>  
  576. </div>  
  577. </div>  
  578. <div class="row r11">  
  579. <div class="txt">  
  580. Min. 300 - Max. 600 Sq Ft  
  581. </div>  
  582. </div>  
  583. <hr class="card1">  
  584. <div class="row r12">  
  585. <div class="col-md-4 col12">  
  586. <text class="loc">Baner</text>  
  587. </div>  
  588. <div class="col-md-4 card-button">  
  589. <!-- <button type="button" class="btn2" style="margin-left: 30px;">  
  590. 2BHK</button> -->  
  591. <input type="text" value="2BHK" class="btn2">  
  592. </div>  
  593. <div class="col-md-4 card-button">  
  594. <!-- <button type="button" class="btn2"> 3BHK</button> -->  
  595. <input type="text" value="3BHK" class="btn2">  
  596. </div>  
  597. </div>  
  598. </div>  
  599. </div>  
  600. </div>  
  601. </div>  
  602. </div>  
  603. </div>  
  604. </div>  
MAP
  1. <div class="col-sm-7 col-md-7 map-card" id="spire-map">  
  2. <div class="row map-image mt-3">  
  3. <!-- <img src="..\bootstrap_navbar\assets\images\map-image.png" alt="map-image"  
  4. class="img img-responsive" style="width: 100%;"> -->  
  5. <iframe  
  6. src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3782.2470145766283!2d73.79360031489337!3d18.56289918738437!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2bf29c4263285%3A0x2d7a07fc0d5074bc!2sThe%20Spires!5e0!3m2!1sen!2sin!4v1588847570414!5m2!1sen!2sin"  
  7. width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""  
  8. aria-hidden="false" tabindex="0"></iframe>  
  9. </div>  
  10. </div>  
HERE IS SOME JQUERY CODE I HAVE CREATED
  1. <script>  
  2. $(document).ready(function () {  
  3. $('#card').click(function () {  
  4. $('#maxcard-hide').show();  
  5. $('#spire-map').hide();  
  6. });  
  7. $('#cross').click(function () {  
  8. $('#maxcard-hide').hide();  
  9. $('#spire-map').show();  
  10. });  
  11.   
  12. $(function () {  
  13. $('#customSwitches').change(function () {  
  14. if ($('#customSwitches').is(':checked'))  
  15. $("#spire-map").fadeOut();  
  16. else  
  17. $('#all-card').fadeIn();  
  18. });  
  19. });  
  20. });  
  21. </script>  
PLEASE suggest me how will expand that all card section there are totatl 12 cards in scrollbr when we unchecked it the scrollbar section will be expand and result will be that 12 cards will be divided into two column 6 card in each column
Answers (2)
Next Recommended Forum